爲什麼較大的文本會將內容向左推下？

所以我做了四個簡單的div，我將改變頭div的屬性。爲什麼較大的文本會將內容向左推下？

的HTML：

<div class="third"> 
     Lorem Ipsum 
    </div> 
    <div class="third"> 
     Lorem Ipsum 
    </div> 
    <div class="third"> 
     <div class="header">Lorem Ipsum</div> 
    </div>

的CSS：

.third { 
    width:500px; 
    display:inline-block; 
    border-right:1px solid black; 
    height:400px; 
} 
.header { 
    margin-left:16%; 
    font-family:Arial; 
    font-size:200%; 
}

第三格的偉大工程，但前兩個div的推，因爲更大的文字了。我能做些什麼來防止這個問題？

來源

2014-03-26 123321123321

總之，加上'垂直對齊：top'爲'.third'。默認的「vertical-align」值是「baseline」。「內聯塊」的基線是正常流程中最後一個線框的基線，除非它沒有流入線框或者其「溢出」屬性具有除「可見」以外的計算值，否則這種情況下的底線是底部邊緣邊緣 - 請參閱http://stackoverflow.com/questions/12950479/display-inline-block-elements-vertical-aligns-inproperly/12950536#12950536 – andyb

@CTravel將該寬度更改爲「100px」（或使您的瀏覽器寬度> 1500px），所以塊不會打包看到問題。 – andyb

添加vertical-align: top將解決您的問題。

小提琴：http://jsfiddle.net/QX7FH/

如果你很好奇，爲什麼這個作品，andyb做了偉大的工作，解釋爲什麼在這裏：Why does this inline-block element have content that is not vertically aligned

來源

2014-03-26 16:42:35 Jack

請嘗試解釋爲什麼你的答案解決了問題。 – andyb

@andyb哇，對不起。我其實認爲你在評論中做了很好的解釋（我給了你一個贊成）。發佈我的答案後，我看到了您的答案和鏈接。我很抱歉沒有像你原來的帖子那麼徹底。 – Jack

這不是真正的徹底，而是關於分享你的問題是什麼以及你的解決方案爲什麼修復它的知識。我見過這麼多答案downvoted不解釋所以只是試圖幫助你不會遭受同樣的命運！沒有必要道歉:) – andyb

div的自動設置爲塊元素。這意味着他們將創建一個換行符。如果您還將display:inline-block;放入您的css文件中用於.header，則應該防止它創建新行。

來源

2014-03-26 16:40:48 GreeKatrina

你可以使用花車，而不是內聯塊，你也獲得瀏覽器支持的一點點（舊IE的）：

http://jsfiddle.net/aP9Fu/

.third { 
    width:500px; 
    display:block; 
    border-right:1px solid black; 
    height:400px; 
    float: left; 
}

另外，我增加了一個容器周圍所有的div以清除漂浮物。

來源

2014-03-26 16:41:03

爲什麼較大的文本會將內容向左推下？

回答

相關問題