如何用CSS實現多欄布局

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

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

<p ><p style="background-color:red">1</p><p style="background-color:yellow">2</p><p style="background-color:blue">3</p></p>

1：float實現多欄布局

float屬性控制目標HTML組件是否浮動以及如何浮動。設定該屬性過後，對象會被當做塊組件處理。

浮動HTML組件將會漂浮並緊跟它的前一個組件，直到遇到邊框、內補丁、外補丁、或另一個塊。

        p>p{            border:1px solid black;            float:left;            width:200px;            height: 200px;            text-align: center;        }

2：inline-block盒模型

inline-block盒模型的元素既不會佔據一行，同時也支援用width、height指定寬度和高度。
inline-block盒模型預設會採用底端對齊的方式，vertical-align:top可使其頂端對齊。

        p>p{            display:inline-block;            border:1px solid black;            text-align:center;            width:200px;            height: 200px;            vertical-align: top;        }

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

3： display: flex 彈性布局

Flex 彈性布局的功能就比較強大了，可以為盒狀模型提供最大的靈活性實現複雜的布局，任何一個容器都可以指定為 Flex 布局。

flex-direction屬性決定主軸的方向，flex-direction: row;表示在父容器裡橫向排列，flex-direction: column;表示在父容器裡縱向排列。

        p{            display: flex;            flex-direction: row;            height:200px;            width: 600px;        }        p>p{            border:1px solid black;        }