chidren當我鍵入文本

Question

DIV下移這是我的代碼：

#wrapper { 
 
\t margin: 0 auto; 
 
\t display: block; 
 
\t width: 1200px; 
 
\t border: 1px solid red; 
 
} 
 

 
div { 
 
\t width: 150px; 
 
\t height: 200px; 
 
\t border: 1px solid red; 
 
\t display: inline-block; 
 
\t margin-right: 80px; 
 
} 
 
\t

<div id="wrapper"> 
 
<div>this is test. this is test.</div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
</div>

Answer 1

顯示爲inline-block對準到其父基線的元件，因此，它向下移動時，它具有的內容。

給他們一個vertical-align: top價值將解決這一問題。

另一個選擇是放棄內聯塊，並給予wrapperdisplay: flex

#wrapper { 
 
\t margin: 0 auto; 
 
\t display: flex; 
 
\t width: 1200px; 
 
\t border: 1px solid red; 
 
} 
 

 
div { 
 
\t width: 150px; 
 
\t height: 200px; 
 
\t border: 1px solid red; 
 
\t margin-right: 80px; 
 
}

<div id="wrapper"> 
 
<div>this is test. this is test.</div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
</div>

Answer 2

添加vertical-align: top;到您的div的CSS; d

Answer 3

永遠記住定義vertical-align爲inline-block元素。

#wrapper { 
 
\t margin: 0 auto; 
 
\t display: block; 
 
\t width: 1200px; 
 
\t border: 1px solid red; 
 
} 
 

 
div { 
 
\t width: 150px; 
 
\t height: 200px; 
 
\t border: 1px solid red; 
 
\t display: inline-block; 
 
    vertical-align: top; /* add this always with inline-block */ 
 
\t margin-right: 80px; 
 
}

<div id="wrapper"> 
 
<div>thisd ihd sofjdlkfj dlkfjdlkfj d</div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
</div>