我想一个接一个地显示 div 内容(具有不同的高度)，并排显示 2 个 div。我已尝试这样做，但我在具有不同高度的 div 之间获得了空间。
代码如下:
<html>
<div class="itemlist">
<div class="ItemView">
<p>content</p>
</div>
<div class="ItemView">
<p>content</p>
</div>
<div class="ItemView">
<p>content</p>
</div>
<div class="ItemView">
<p>content</p>
</div>
<div class="ItemView">
<p>content</p>
</div>
</div>
.ItemView {
width: 46%;
float:left;
background: #fff;
margin: 10px 10px 0px 10px;
border: solid 1px #aaa;
text-align: left;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 2px 2px 2px #ddd;
-webkit-box-shadow: 2px 2px 2px #ddd;
box-shadow: 2px 2px 2px #ddd;
min-height: 90px;
padding: 0;
}
当前输出:
最佳答案
您应该将 2 列分开，并将一列的所有元素放在一个 float 容器中。
看到这个 FIDDLE
HTML :
<div class="itemlist">
<div class="col">
<div class="ItemView">
<p>content</p>
</div>
...
</div>
<div class="col">
<div class="ItemView">
<p>content</p>
</div>
...
</div>
</div>
CSS:
.ItemView {
width: 100%;
background: #fff;
margin: 10px 0 0;
border: solid 1px #aaa;
text-align: left;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 2px 2px 2px #ddd;
-webkit-box-shadow: 2px 2px 2px #ddd;
box-shadow: 2px 2px 2px #ddd;
min-height: 90px;
padding: 0;
}
.col{
float:left;
width:46%;
margin: 0 10px;
}
.big {
height:200px;
}
关于html - 具有动态高度的多个 div，并保持 2 个并排的 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23386129/