这两个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为什么不对齐？

回答

相关问题