Question

我正在尝试在页面上对齐包含动态内容的多个div，因为它们的高度可能不同。

这是我页面中div的常规设计： enter image description here

现在，我想用css设计这样的设计：

enter image description here

为了达到这个目的，如何修改DIV的CSS？

Answer 1

我会制作3 div代表列，然后在每列内打印/包含方框。然后，只需将margin-right添加到div列，当然还有float: left;。在你的盒子上只有min-height所以他们可以根据内容进行拉伸。例如：

<div class = "column">
  <div class = "content-box"></div>
  <div class = "content-box"></div>
</div>
<div class = "column">
  <div class = "content-box"></div>
  <div class = "content-box"></div>
  <div class = "content-box"></div>
</div>
<div class = "column">
  <div class = "content-box"></div>
  <div class = "content-box"></div>
</div>

现在，如果你关心他们所有人最终拥有相同的高度，那么你将不得不使用jQuery。

Answer 2

我想，你正在寻找一个弹性盒css。这是我的jsfiddle： jsfiddle

.container {
    display: box;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    box-pack: start;
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -ms-box-pack: start;
    box-align: stretch;
    -webkit-box-align: stretch;
    -moz-box-align: stretch;
    -ms-box-align: stretch;
    box-orient: horizontal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -ms-box-orient: horizontal;
}

.container .column {
    max-width:200px;
    display: box;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    box-pack: start;
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -ms-box-pack: start;
    box-flex: 1;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-box-flex: 1;
    box-orient: vertical;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -ms-box-orient: vertical;
    box-align: stretch;
    -webkit-box-align: stretch;
    -moz-box-align: stretch;
    -ms-box-align: stretch;
}

.column .dynamic-content {
    display: box;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    box-orient: vertical;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -ms-box-orient: vertical;
    box-pack: start;
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -ms-box-pack: start;
    box-align: start;
    -webkit-box-align: start;
    -moz-box-align: start;
    -ms-box-align: start;
    box-flex: 1;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-box-flex: 1;
}
.container .dynamic-content {
    box-shadow: 1px 1px 2px 1px darkgrey;
    margin: 2px;
    background: lightcyan;
}

这是纯粹的CSS，没有javascript。更改＆＃34;动态内容＆＃34; div，列布局将相应对齐。

以下是从my jsfiddle复制并粘贴的HTML：

<div class="container">
    <div class="column">
        <div class="dynamic-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <p>Sample Sample</p>
            <p>Sample Sample</p>
        </div>
        <div class="dynamic-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
        </div>
    </div>
    <div class="column">
        <div class="dynamic-content">
            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
        </div>
        <div class="dynamic-content">
            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span>
            <p>Sample Sample</p>
        </div>
    </div>
    <div class="column">
        <div class="dynamic-content">
            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
        </div>
        <div class="dynamic-content">
            <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</span></p>
        </div>
    </div>
</div>

Answer 3

根据Jonur的回答，我创建了3列包含不同高度的单元格。 http://jsfiddle.net/z4Ygv/2/

列定义并向左浮动。我为jsfiddle设置了明确的高度，但是当我在自己的浏览器中使用它时，我有100％的高度来占据整个页面。

.shortcell {
    height:30%;
    width:90%;
    background:#ff0000;
    margin: .25em .25em;
}
.column {
    width:30%;
    height:20em;
    float:left;
    border:1px solid black;
}
.longcell {
    height:45%;
    width:90%;
    background:#00ff00;
    border:1px solid black;
    margin: .5em .5em;
}

这有点简单......实际上marty只在jsFiddle中向左显示了一列

调整页面上没有空格的动态div

3 个答案: