Question

我希望一个接一个地显示div内容（具有不同的高度），并排{2} div。我试图这样做，但我在div s之间的空间不同。

以下是代码：

<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;
}

当前输出：

current output

Answer 1

您应该将2列分开，并将列的所有元素放在浮动容器中。

请参阅 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;
}

多个div具有动态高度，并且还保持2个并排的div

当前输出：

1 个答案: