CSS3列，强制元素打破

Question

我真的不知道如何提出这个问题，但我会尽我所能：D

让我们从图片开始：

对不起，但是我真的不知道如何提出这个问题，我想像第一张图片一样打破元素，但我得到的只是图片2和3 css：

.contents{
    background-color: rgb(57, 66, 100);
    border-radius:5px;
    overflow: hidden;
    display:inline-block;
    width:286px;
    margin: 5px 5px 5px 5px;
    float: right;
}

html：

<div class='contents'>
    <div class='title'>
        <span class='nxnsh'>a</span>
    </div>
    <div class='content'>

        <ul class='nlisty'>
            <li><a href=''>as</a></li>
            <li><a href=''>as</a></li>
            <li><a href=''>as</a></li>
            <li><a href=''>as</a></li>
        </ul>

    </div>

</div>

这里是小提琴http://jsfiddle.net/Qaagv/ 我想删除顶行和底行之间的空白区域

Answer 1

小提琴可以使这个问题更容易，因为它可以帮助我们理解你的结构。

你能转移到这样的结构吗？ http://jsfiddle.net/Y6Gfs/

这将创建3列布局，每个列都可以包含元素（文章）。

.column-wrapper {
  width:100%;    
}
.column {
  width:33%;
  float:left;
  display:inline-block;
}
.article {
  background-color:green;
  border: 2px solid pink;    
}

<div class="column-wrapper">
    <div class="column">
        <div class="article"> this is some content for 1</div>        
    </div>
    <div class="column">
        <div class="article"> this ish a not a lot</div>        
        <div class="article"> here is some </div>                
    </div>
    <div class="column">
        <div class="article"> this is a long 3 column layout that will atke up most room </div>                
        <div class="article"> who is anne hatheway anyway </div>        
        <div class="article"> final copy </div>        
    </div>
</div>