0

我有一个包含动态数量的框的页面，我想将其分布在几列和几行中。

我有以下愿望：

  • 框的内容高度不同，但我希望一个“行”中的所有 div 具有相同的视觉外观高度。它们有边框和背景颜色。
  • 我想在页面宽度上对齐列

理想情况下，我希望页面具有响应性，因此列数应根据浏览器宽度进行调整。但是在阅读和观看了很多示例之后，我看不出这如何与证明相结合，因为这总是需要一个行 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
}

我想我有两个问题：

  1. 第一个问题（可能会使另一个问题过时），是否有更好的解决方案，例如使用 jQuery 来真正创建一个动态的 div 网格，根据浏览器宽度很好地分布？
  2. 如果没有：身高问题可以解决吗？

谢谢！

4

2 回答 2

0

就这样？（如果您想要浏览器的大小，请将 con 宽度更改为 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;
}

在这里演示

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

width: 100%;

在这里演示

如果你想要像你一样的间距添加border-spacing到.con

border-spacing: 10px;

在这里演示

于 2013-10-15T10:37:21.433 回答
0

我一直在努力寻找能满足我需求的东西，但恐怕只有 CSS 是不够的。

我想 jQuery freewall 插件可能会给我我需要的东西，尽管它可能对我的愿望有点沉重。

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

于 2013-10-16T06:51:15.143 回答