如何讓兩個div處於一行

我們知道 div是塊級元素,是獨佔一行的.一般情況下,兩個相鄰的div是不會處於一行的

例如:html**  

>

<

html

>

<

head

lang="en"

>

<

meta

charset="utf-8"

>

<

title

>讓兩個div處於同一行

title

>

head

>

<

body

>

<

divstyle="height: 40px;width: 80px;background-color: #006ba4"

>

div1  

div>

<

divstyle="height: 40px;width: 70px;background-color:chartreuse"

>

div2  

div>

body

>

html

>

瀏覽器效果:

那麼如何讓兩個相鄰的div在同一行呢?

有兩種方式

方式一:使用float

html**  

>

<

html

>

<

head

lang="en"

>

<

meta

charset="utf-8"

>

<

title

>讓兩個div處於同一行

title

>

<

style

>

div  

style

>

head

>

<

body

>

<

divstyle="height: 40px;width: 80px;background-color: #006ba4"

>

div1  

div>

<

divstyle="height: 40px;width: 70px;background-color:chartreuse"

>

div2  

div>

body

>

html

>

執行效果:

方式二:使用

inline-block

html**  

>

<

html

>

<

head

lang="en"

>

<

meta

charset="utf-8"

>

<

title

>讓兩個div處於同一行

title

>

<

style

>

div  

style

>

head

>

<

body

>

<

divstyle="height: 40px;width: 80px;background-color: #006ba4"

>

div1  

div>

<

divstyle="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是不會處於一行的 例如 lang en charset utf 8 讓兩個div處於同一行title head style height 40px width 80px background color 006ba4 div1 d...

學習雜記（如何讓兩個div在同一行）

時不時會要記著一些東西，以防自己忘記總結。css浮動 div是塊級元素，在頁面中獨佔一行，自上而下排列，也就是傳說中的流。在div的標準流中，無論div多小，它都獨佔一行，相互沒有交集。但是很多地方要使兩個或者多個div處於一行，這時候要對操作div設定浮動屬性。設定浮動後就不再屬於標準流，成為乙個...