Question

有没有办法让this jsFiddle code看起来像

这样的两列

a b
c d
c
c
e f
g h

以便d边框的高度与大块c 与纯css 的边框相同？块的数量是不可预测的。

这些块应该在两列中。

一行中的块应具有相同的高度（绿色边框的高度应相同）。

每个块的内容都是文本，其大小可能不同。

是否可以使用纯CSS进行制作？

我认为如果没有额外的内部div我命名为<div class="baddiv"></div>以强调html代码结构有点复杂，那就不难了。解决方案允许应用类名和css。

谢谢。

这是the jsFiddle code：

<style>
.main{
overflow:hidden;
    width:204px;
}
.inner-div{
    border:1px solid green;
    width:100px;
    float:left;
    overflow:hidden;
}
</style>
<div class="main" style=" border:1px solid red;">
    <div class="baddiv">
        <div class="inner-div">a</div>
        <div class="inner-div">b</div>
        <div class="inner-div">ccccccccccc<br/>cccccc<br/>cccccc</div>
    </div>
    <div class="inner-div">d</div>
    <div class="baddiv">
        <div class="inner-div">e</div>
    </div>
    <div class="inner-div">f</div>
    <div class="inner-div">g</div>
    <div class="inner-div">h</div>
</div>

P.S。另外，添加

.inner-div{
 min-height:200px;
}

不是一个完美的解决方案，因为在大多数块中会出现很多空格，并且无法保证div之一不会包含高度大于200px的文本。

Answer 1

Flexbox将是解决此问题的理想方式。但是如果你需要浏览器支持，你可以通过以下方式强制你的div表现得像：

display: [table|table-row|table-cell]

http://jsfiddle.net/pVHw6/

Answer 2

div
{
    display:table-cell;
}

这可以解决您的问题。但是你需要根据布局重新调整div。

即使高度与纯css不同，也可以使浮动左内部div成两列

2 个答案: