如何讓兩個Div處於同一行
阿新 • • 發佈:2019-01-01
div是塊級元素,是獨佔一行的,一般情況下,兩個相鄰的div是不會處於一行的
(1)使用float
<style>
div {
float : left;
}
</style>
<div style="height : 40px;width : 80px;">
Div1
</div>
<div style="height : 40px; width : 70px;">
Div2
</div>
(2)使用inline-block
<style>
div {
display:inline-block ;
}
</style>
<div style="height : 40px; width : 70px;">
Div1
</div>
<div style="height : 40px; width : 70px;">
Div2
</div>
注意:
(1)為什麼要使用display :inline-block;而不是display:inline;因為display:inline導致元素的height和width樣式失效
(2)這兩種方式的顯示效果並不是完全一樣的,為什麼呢?
方式二中兩個Div中會有大小為8px的margin,這是從body繼承過來的