html5+css3网页制作:三栏布局宽度自适应,css三栏布局的五种写法，中间自适应，左右宽度固定...
假設高度已知，請寫出三欄布局，其中左右各位300px，中間自適應
1、左右浮動
.left {
float: left;
width: 300px;
background: red;
}
.right {
float: right;
width: 300px;
background: green;
}
.center {
background: yellow;
}
這是浮動布局
2、絕對定位
.left-center-right div {
position: absolute;
}
.left {
left: 0;
width: 300px;
background: red;
}
.right {
right: 0;
width: 300px;
background: green;
}
.center {
left: 300px;
right: 300px;
background: yellow;
}
這是絕對定位
3、flex布局
.left-center-right {
display: flex;
}
.left {
width: 300px;
background: red;
}
.right {
width: 300px;
background: green;
}
.center {
flex: 1;
background: yellow;
}
這是flex布局
4、table布局
.left-center-right {
display: table;
width: 100%;
}
.left-center-right div {
display: table-cell;
}
.left {
width: 300px;
background: red;
}
.right {
width: 300px;
background: green;
}
.center {
background: yellow;
}
這是table布局
5、grid布局
.left-center-right {
display: grid;
width: 100%;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
}
.left {
background: red;
}
.right {
background: green;
}
.center {
background: yellow;
}
這是grid布局
優缺點：
浮動布局：因為浮動布局是脫離文檔流的，在實際使用的過程中得很好的處理浮動(清除浮動)，如果處理不好會引發出一些問題，這是它的缺點；優點是兼容性比較好
絕對定位：優點：快捷，不容易出問題；缺點：由于這個是脫離文檔流的導致后面的子元素也是脫離文檔流的，導致實用性不太好
flex布局：css3新出的布局方式，兼容性比較好，有效的解決以上兩個問題
table布局：兼容性好，由于ie8是不兼容flex布局的，這時候可以使用table布局；缺點：歷史的詬病以外還有就是這三欄布局只要有一欄超出了指定的高度，其他兩欄也會隨之變高，在某些場景中這是不適用的
grid布局：可以做很多事情，代碼量相對來說會比較少
如果去掉高度已知，哪些就不適用了？
效果圖：
總結
以上是生活随笔為你收集整理的html5+css3网页制作:三栏布局宽度自适应,css三栏布局的五种写法，中间自适应，左右宽度固定...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 宽屏图片轮播html,jQuery实现宽
- 下一篇： html 边框循环变色,方框用过渡走一圈