編碼的世界 / 優質文選 / 生涯

css橫向布局的幾種方式

2022年5月16日
-

首先我們先看看 html部分 bodyTip 內的三個標簽我們需要讓他們橫向顯示並且根據瀏覽器寬度平均顯示

<body>
<!頭部>
<div class="head">
 我是頭部
</div>
<div class="bodyTip">




 <!左邊>
 <div class="leftTip itemDiv" style="background: red">我在左邊</div>
 <!中間>
 <div class="centerTip itemDiv" style=" background: yellow">我在中間</div>
 <!右邊>
 <div class="rightTip itemDiv" style=" background: green">我在右邊</div>
</div>
<div class="bottomTip">我是底部</div>
</body>

1、table 布局
記得我們最初的剛學的時候是用html 的 table來布局的，但是只能應用一些簡單的布局，對於複雜的布局頁面，代碼會顯的很亂，現在css也可以用table了
css如下

.bodyTip{
 display: table;
 table-layout: fixed;
}
.itemDiv{
 display:table-cell;
}

2、flex 配合 justify-content
這2個命令配合會自動平均分給每個div，如果需要指定每個不同的寬度，使用width即可，這裏只演示最簡單的功能
css代碼

 .bodyTip{
 display: flex;
 justify-content: space-between;
 border: 1px solid;
 }

效果圖

3、flex 另一種方式，這種方式自動填充了背景色
css代碼

.bodyTip {
 display: flex;
 border: 1px solid;
｝
.itemDiv {
/* flex 取值0 ~ 1 */
 flex: 1;
｝

效果圖

3、當然還可以用float 布局，但是這種方式會產生很多問題，本人建議慎用，但是可以配合fiex 一起使用
4、之前見有人用過絕對定位和相對定位配合使用達到布局效果，昨天試了一下，實在是做不出來
注意：flex布局在移動端用的比較多，pc端會有兼容性問題，具體請查閱百度

編碼的世界 / 優質文選 / 生涯

css橫向布局的幾種方式

熱門文章