Question

我有两个div，我试图并排，但遇到麻烦。我知道div是块元素，但我从来没有遇到过将它们并排放置的问题。

HTML：

<div class="contact">
    <div class="team" id="staff-1"> 
        <div id="DIV_2">
            <img id="brian" src="../img/brian.png">
        </div>
    </div>
    <div class="team" id="staff-1"> 
        <div id="DIV_2">
            <img id="brian" src="../img/brian.png">
        </div>
    </div>

</div>

我不想发布所有的CSS，因为SO帖子相当长，但是这里加载的是jsfiddle：http://jsfiddle.net/rynslmns/5pQJ7/

Answer 1

您可以使用浮动或内联块元素：

.team {
    float: left;
    width: 33%;
}

OR

.team {
    display: inline-block;
    width: 33%;
}

我会选择“display：inline-block”，因为你不必在之后清除浮动。

Answer 2

你只需要使用css float来使它们并排。

.contact {
    overflow: hidden;
}

.team {
    float:left;
}

以下是您的示例代码：

http://jsfiddle.net/jcfB3/

注意，您的ID不正确，您不能拥有2个具有相同值的ID，我将它们设为唯一。此外，在边界块元素中使用没有任何其他内容的浮点数有一些问题，我在示例代码中修复了这些问题。有关详细信息，请参阅http://www.quirksmode.org/css/clearing.html。这就是我添加overflow: hidden。

的原因

Answer 3

重复ID“staff-1”，“brian”和“DIV_2”。 DOM id是唯一的。

div对齐不会并排放置

3 个答案: