css實現三欄佈局的三種方式（附程式碼）
- 不言原創
- 2018-08-09 11:15:031985瀏覽
這篇文章要跟大家介紹的內容是關於css實現三欄佈局的三種方式（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
浮動佈局
分成三個div，另一個父級包含這三個div，使用float，
注意點：三個div，left --> right ---> center 這種順序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.left {
float: left;
width: 300px;
height: 100px;
background-color: red;
}
.right {
float: right;
width: 300px;
height: 100px;
background-color: blue;
}
.center {
margin: 0px 300px 0px 300px;
background-color: black;
height: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="left">1</div>
<div class="right">2</div>
<div class="center">3</div>
</div>
</body>
</html> #Flex
設定中間盒子FLex：1，這樣的話就可以實現自適應，預設水平排列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.father {
display: flex;
}
.left {
width: 300px;
height: 100px;
background-color: red;
}
.center {
flex:1;
height: 100px;
background-color: black;
}
.right {
width: 300px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="father">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
</html>flex相關知識點，一般會使用到的
#1、設定display：flex
2、容器圖：
軸：水平main axis和垂直cross axis
3、容器的屬性
flex-direction：主軸的方向，row | row-reverse | column | column-reverse;
flex-wrap：換行， nowrap | wrap | wrap-reverse;
flex-flow：flex-direction和flex-wrap簡寫
justify-content：主軸上的對齊方式， flex-start | flex-end | center | space-between | space-around;
align-items：交叉軸上如何對齊，flex-start | flex-end | center |strcenter |
##絕對定位對齊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.one {
background-color: red;
position: absolute;
left: 0;
width: 300px;
height: 100px;
}
.two {
left: 300px;
right: 300px;
background-color: blue;
position: absolute;
height: 100px;
}
.three {
right: 0px;
width: 300px;
background-color: yellow;
position: absolute;
height: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="one">1</div>
<div class="two">1</div>
<div class="three">1</div>
</div>
</body>
</html>相關文章推薦：
以上是css實現三欄佈局的三種方式（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn