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

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

Answer 3

你只需要使用 css float 就可以让它们并排。

.contact {
    overflow: hidden;
}

.team {
    float:left;
}

这是您的示例代码：

http://jsfiddle.net/jcfB3/

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

overflow: hidden

的原因。