這兩個DIV爲什麼不對齊？

我有這樣的HTML：這兩個DIV爲什麼不對齊？

<div class="s0"> 
    <div class="s1"></div><div class="s2">Some text</div> 
</div>

這個CSS：

.s0 { 
    width:300px; 
    background-color:gray; 
} 

.s1 { 
    width:150px; 
    height:100px; 
    display:inline-block; 
    background-color:blue; 
    margin-right:10px; 
} 

.s2 { 
    width:140px; 
    height:100px; 
    display:inline-block; 
    background-color:green; 
}

如果測試此代碼，你會看到兩個div不對齊。如果我刪除從綠色DIV問題消失文本 http://jsfiddle.net/memanuele/aUdPs/2/

：

您可以在這裏檢查了這一點。

有人能解釋我爲什麼會發生這種情況嗎？對不起，如果這已被問到，但我找不到在任何其他問題完全相同的問題。

在此先感謝。

來源

2014-05-11 emanuele

可能會更容易漂浮的div –

http://jsfiddle.net/aUdPs/4/ - 帶花車 – aldanux

啊，這是一個垂直對齊問題。

做

.s1, .s2 { 
    vertical-align: top; 
}

這將同時設置的div對齊到父的頂部。

（或者如果你願意，你可以vertical-align中間，底部）。

或者，您可以將一個或另一個DIV對齊到頂部。如果您打算使用柱狀佈局，您也可以考慮float屬性。

來源

2014-05-11 23:45:49 geoff

非常感謝，這個作品。我只是想知道這個行爲背後的邏輯是什麼... – emanuele

@emanuele，這只是行內塊元素的默認行爲。認爲'圖像'本身就是內聯塊。 –

嘗試了這一點

.s0 { 
    width:300px; 
    background-color:gray; 
    display:inline-block; 
} 

.s1 { 
    float:left; 
    width:150px; 
    height:100px; 
    display:inline; 
    background-color:blue; 
    margin-right:10px; 
} 

.s2 { 
    float:right; 
    width:140px; 
    height:100px; 
    display:inline; 
    background-color:green; 
}

它爲我的小提琴。我添加了一個display: inline-block;到.s0改變display從inline-block到inline爲S1和S2和浮動.s1左，右.s2

你能做到這一點，或者你可以這樣做：

.s1, .s2 { 
    vertical-align: top; 
}

任一個作品。

來源

2014-05-11 23:49:49

將float: right;添加到.s2 div類修復了此問題。

來源

2014-05-11 23:52:32 rfolt

理解的垂直取向行爲

考慮以下三個例子：

<h2>Example 1</h2> 
<div class="s0 ex1"> 
    <div class="s1"></div><div class="s2">Some text</div> 
</div> 

<h2>Example 2</h2> 
<div class="s0 ex2"> 
    <div class="s1">A word</div><div class="s2">Some text</div> 
</div> 

<h2>Example 3</h2> 
<div class="s0 ex3"> 
    <div class="s1"></div><div class="s2">Some text</div> 
</div>

和下面的CSS：

.s0 { 
    width:300px; 
    background-color:gray; 
} 
.s1 { 
    width:150px; 
    height:100px; 
    display:inline-block; 
    background-color:blue; 
    margin-right:10px; 
} 
.s2 { 
    width:140px; 
    height:100px; 
    display:inline-block; 
    background-color:green; 
} 
.ex3 div { 
    vertical-align: top; 
}

在實施例1，則有一個塊級元素帶有兩個子內嵌塊元素的.s0（s1和s2）。兩個內聯塊元素沿着父元素的基線定位。在s1的情況下，基線是該元件的底部邊緣的邊緣，因爲元素沒有文本，因此，沒有流入內容如本說明書中說明的：

一個「內聯塊」的基線在正常流程中其最後一個線框的基線，除非它沒有流入線框或其「溢出」屬性的計算值不是「可見」，在這種情況下，基線是底部邊緣邊緣。

參見：http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align

如果有在s1文本如實施例2中，則s1基線是內聯的文本框的底部邊緣。

如果應用vertical-align屬性top（如在以前的答案所述），然後修復該問題，如例3

見琴：http://jsfiddle.net/audetwebdesign/vY35c/

來源

2014-05-13 01:49:39

這兩個DIV爲什麼不對齊？

回答

相關問題