html - 内容列表的两列布局

Question

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

列表必须是两栏，我不想创建2个div来解决这个问题，除非没有别的办法。

这是一个例子，说明现在的情况。但是盒子的尺寸必须相同，否则较小的盒子将有较大的填充以适应另一个盒子的尺寸。

http://jsfiddle.net/GTh4Y/

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，然后将它们 float 到左侧。

<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。