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

Question

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

这是我页面中div的正常设计：

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

如何修改 DIV 的 css 以实现此目的？

Answer 1

我会制作 3div代表列，然后在每列中打印/包含框。然后只需将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

我猜你正在寻找一个 flex box 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。更改“动态内容” div，列布局将相应对齐。

这是从我的 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中只为我显示了左侧的一列