多个div高度动态且保持两个并排的div在一起。

Question

多个div高度动态且保持两个并排的div在一起。

htmlcss

3

我希望能够将高度不同的

内容依次显示在一起，每行有两个

并排排列。我已经尝试过这样做，但是遇到了高度不同

之间的空隙问题。

以下是代码：

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

当前输出：

当前输出

- user3588720

你能具体一点吗？这里是你的示例：http://jsfiddle.net/Ga5nX/。你能使用jQuery吗？ - giker

如果您注意上面的图像，您会发现第一列的第二行和第三行之间有一个间隙。我想要将它们依次显示，并且间距均匀。 - user3588720

您的HTML标记可以更改吗？提供期望输出的图像也会很有帮助。 - MrWhite

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- web-tiki · Accepted Answer

您需要将两个列分开，并将一列中的所有元素放置在一个浮动容器中。

请参见此示例

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