Question

我有一个包含动态数量框的页面，我希望在多个列和行上分发。

我有以下愿望：

盒子的内容高度不同，但我希望所有div在一个'line'中具有相同的视觉外观高度。它们有边框和背景颜色。
我想为页面宽度上的列辩护

理想情况下，我希望页面能够响应，因此列数应根据浏览器宽度进行调整。但是在阅读并观察了很多例子之后，我并没有看到这种可能性如何与证明相结合，因为总是需要一个行div。

所以我要使用固定数量的列。通过各种示例，我得出了这个解决方案，但仍然存在一个挑战：让每个div具有相同的高度：

http://jsfiddle.net/johannesklapwijk/BQJ6A/

HTML：

<div class='row'>
    <div class='cell'>a<br/>b</div>
    <div class='cell'>a<br/>b<br/>c</div>
    <div class='cell'>a<br/>b</div>
    <span class='stretch'/>
</div>

CSS：

.row {
    text-align: justify;
    border: 1px solid red;
    padding: 0;
}
.cell {
    display: inline-block;
    width:30%;
    height: 100%; /* does not get the height of the parent div */
    border: 1px solid black;
   background-color: green;
}

.stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}

我猜有两个问题：

第一个问题（可能会使另一个过时），是否有更好的解决方案，例如使用jQuery来真正制作一个基于浏览器宽度很好地分配div的动态网格？
如果不是：高度问题可以解决吗？

谢谢！

Answer 1

这样吗？（如果您希望将浏览器的大小设置为浏览器的大小，请将控制宽度更改为100％）

<强> HTML：

<div class="con">
    <div class="col">asd</div>
    <div class="col">asdasdasd
        <br />asdas
        <br />asdasd
        <br />asdasd
        <br />asdasd</div>
    <div class="col">asd</div>
</div>

<强> CSS

.con {
    height: 100%;
    width: 400px;
    display: table;
    table-layout: fixed;
}
.col {
    display: table-cell;
    border: #000000 solid 1px;
}

DEMO HERE

如果你想要它，浏览器的大小会在width上更改.con

width: 100%;

DEMO HERE

如果你想要像你那样的间距，请将border-spacing添加到.con

border-spacing: 10px;

DEMO HERE

Answer 2

我一直在努力寻找符合我需求的东西，而且我担心CSS还不够。

我想jQuery freewall插件可能会给我我需要的东西，即使它可能对我的意愿有点重。

http://vnjs.net/www/project/freewall/

合理的内联块div的高度100％

2 个答案: