CSS實現多欄布局的幾種方式

2021-08-08 01:14:25 字數 1849 閱讀 2629

假如把下面的三個div顯示在同一行

1：float實現多欄布局float屬性控制目標html元件是否浮動以及如何浮動。設定該屬性過後，物件會被當做塊元件處理。float的取值一共有四個：left（向左浮動）、right（向右浮動）、none（不浮動）、inherit（繼承父元素值），將box1,box2,box3都設定成向左浮動，浮動元素的下乙個兄弟元素如果也設定了同一浮動方向，則會緊隨改元素顯示。

設定了float之後，元素會脫離普通文件流。它們的父元素也不會被撐開，所以#parent的高度此時為0。 

#parent>div


#box1


#box2


#box3
我們也可以這樣，將box1,box2,設定成向左浮動，box3不浮動。由於box1,box2設定了浮動之後脫離了普通文件流。對box3來說就像前面不存在box1,box2一樣，box3也會顯示在這一行，但是會被box1遮擋住。設定box3的 margin-left:400px;可以讓它看起來像是顯示在box1,box2後面。這個時候#parent被box3撐開，高度此時為202px。

#parent>div


#box1


#box2


#box3
2：inline-block盒模型inline-block盒模型的元素既不會佔據一行，同時也支援用width、height指定寬度和高度。display:inline-block 將物件呈現為inline物件，但是物件的內容作為block物件呈現。之後的內聯物件會被排列在同一行內。通常需要設定vertical-align：top使其頂端對齊。

#parent>div


#box1


#box2


#box3
inline-block水平呈現的元素間，換行顯示或空格分隔的情況下會有間距。把空格去掉間隙自然就會消失，這樣就不會顯示間隔。 

123
3：display: flex 彈性布局設定#parent容器的 diaplay:flex;父容器相當於乙個彈性盒子。裡面的div會按照flex-direction設定的模式排列。flex彈性布局的功能就比較強大了，可以為盒狀模型提供最大的靈活性實現複雜的布局，任何乙個容器都可以指定為 flex 布局。flex-direction屬性決定主軸的方向，flex-direction: row;表示在父容器裡橫向排列，flex-direction: column;表示在父容器裡縱向排列。

#parent


#parent>div


#box1


#box2


#box3
4：display: tabledisplay:table     設定了該屬性的元素作為塊級**來顯示,類似 。

display:table-cell 設定了該屬性的元素會作為乙個**單元格顯示，類似 和

可以用這一系列table-row-group、table-header-group、table-footer-group、table-row等用其他標籤實現類似於**的布局。

#parent


#parent>div


#box1


#box2


#box3

CSS實現三欄布局的幾種方案

該部落格主要介紹的是通過css實現三欄布局的幾種方案 type text css float layout div float layout left float layout right float layout center style class float layout class left...

三欄布局的幾種方式

這裡介紹幾種三欄布局的實現方式，最終目的都是左右兩邊固定寬度，中間的自適應。最終效果如下 一 流式布局 en class wrap class left class right class main 優點 這是比較正常的思路，兩邊浮動，中間利用margin。缺點 主題部分不能優先載入，體驗不好。2 ...

CSS實現 兩欄布局，三欄布局

aside div main div div aside main 左側欄固定寬度向左浮動，右側主要內容則用margin left留出左側欄的寬度，預設寬度為auto，自動填滿剩下的寬度。右側固定寬度，左側自適應則是同理，只要將固定欄右浮動，使用margin right空出其寬度即可。aside d...