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是唯一的。