我們知道 div是塊級元素,是獨佔一行的.一般情況下,兩個相鄰的div是不會處於一行的
例如:
lang="en">
charset="utf-8">
讓兩個div處於同一行title>
head>
style="height: 40px;width: 80px;background-color: #006ba4" >
div1
div>
style="height: 40px;width: 70px;background-color:chartreuse" >
div2
div>
body>
html>瀏覽器效果:
那麼如何讓兩個相鄰的div在同一行呢?
有兩種方式
方式一:使用float
lang="en">
charset="utf-8">
讓兩個div處於同一行title>
div
style>
head>
style="height: 40px;width: 80px;background-color: #006ba4" >
div1
div>
style="height: 40px;width: 70px;background-color:chartreuse" >
div2
div>
body>
html>執行效果:
方式二:使用inline-block
lang="en">
charset="utf-8">
讓兩個div處於同一行title>
div
style>
head>
style="height: 40px;width: 80px;background-color: #006ba4" >
div1
div>
style="height: 40px;width: 70px;background-color:chartreuse" >
div2
div>
body>
html>執行效果:
注意:
(1)為什麼要使用display: inline-block;而不是display: inline;,因為display: inline導致元素的height和width樣式失效.
(2)這兩種方式的顯示效果並不是完全一樣的,為什呢?
方式二中兩個div中會有大小為8px的margin,這是從**來的呢?是從body繼承過來的.
如何讓兩個div處於一行
我們知道 div是塊級元素,是獨佔一行的.一般情況下,兩個相鄰的div是不會處於一行的 例如 html html head lang en meta charset utf 8 title 讓兩個div處於同一行 title head body divstyle height 40px width ...
如何讓兩個div處於一行
我們知道 div是塊級元素,是獨佔一行的.一般情況下,兩個相鄰的div是不會處於一行的 例如 html html head lang en meta charset utf 8 title 讓兩個div處於同一行 title head body divstyle height 40px width ...
學習雜記(如何讓兩個div在同一行)
時不時會要記著一些東西,以防自己忘記總結。css浮動 div是塊級元素,在頁面中獨佔一行,自上而下排列,也就是傳說中的流。在div的標準流中,無論div多小,它都獨佔一行,相互沒有交集。但是很多地方要使兩個或者多個div處於一行,這時候要對操作div設定浮動屬性。設定浮動後就不再屬於標準流,成為乙個...