Question

我想打印一个博客新闻列表，每个都有一个静态大小的图片，一个标题和一个简短的摘要。

列表必须是两列，我不想创建2个div来解决这个问题，除非别无其他。

这是一个现在如何做的例子。但是盒子大小必须相同，否则较小的盒子会有一个大的衬垫，以适应另一个盒子的大小。

HTML：

<div class="container">
    <div class="inner" style="height: 320px; background-color: #fa81ee"></div>
    <div class="inner" style="height: 200px; background-color: #ef99ae"></div>
    <div class="inner" style="height: 280px; background-color: #eafe41"></div>
    <div class="inner" style="height: 300px; background-color: #ef5ea8"></div>
    <div class="inner" style="height: 150px; background-color: #98f718"></div>
    <div class="inner" style="height: 160px; background-color: #f21ae9"></div>
    <div class="inner" style="height: 320px; background-color: #8a62e7"></div>
    <div class="inner" style="height: 110px; background-color: #ab43a8"></div>
</div>

的CSS：

.container {
    width: 810px;
    height: auto;
}
.inner {
    width: 400px;
    border: 1px solid white;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    padding: 0;
    margin: 0;
}

如果不添加2个div，我怎么能这样做？

我希望结果如下： http://jsfiddle.net/q8ew8/

Answer 1

首先，您是否有任何理由不想将两个内部div添加为列容器（这是一个更简单的解决方案）？

所以为了做你的要求，而不是让它看起来非常可怕，你必须重新安排你在那里的div.inner然后将它们漂浮在左边。

<div class="container">
<div class="inner" style="height: 320px; background-color: #fa81ee">1</div>
<div class="inner" style="height: 200px; background-color: #ef99ae">2</div>
<div class="inner" style="height: 150px; background-color: #98f718">5</div>
<div class="inner" style="height: 280px; background-color: #eafe41">3</div>
<div class="inner" style="height: 300px; background-color: #ef5ea8">4</div>
<div class="inner" style="height: 320px; background-color: #8a62e7">7</div>
<div class="inner" style="height: 160px; background-color: #f21ae9">6</div>
<div class="inner" style="height: 110px; background-color: #ab43a8">8</div>
</div>

我给他们添加了一个数字来显示他们的原始位置。基本上我所做的就是重新定位它们，以便左列项与高数量的右列项具有相同的高度（1大约相同，2 + 5,3和4接近，7大于6和8）。至于CSS，你只需添加float：left;到.inner。

.container {
    width: 810px;
    height: auto;
}
.inner {
    width: 400px;
    float: left;
    border: 1px solid white;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    padding: 0;
    margin: 0;
}

但实际上最好的方法是让每一列中的所有项目都没有过多的空白区域，只需添加第二组div。

Answer 2

如果您可以更改HTML，我还没有确切了解您的要求，您可以使用column-count来获取您要查找的显示：

ul {
    /*styles*/
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
}

Demo Fiddle1

更有风格的小提琴：

内容列表的两列布局

2 个答案:

Demo Fiddle1

Demo Fiddle2 /观看Fullscreen