div对齐不会并排放置

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

要么

.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的原因overflow: hidden 。

Answer 3

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