在做网页的过程中经常会遇到三列布局的情况，三列布局的解决方法常见的有两种。1.不定宽百分比布局（属于自适应）2.定宽的三列布局。
1.不定宽的百分比布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三列布局</title>
</head>
<style>
.main{
width:33.3%;
height:500px;
border:4px solid yellow;
/*此处使用拔河效应让div居中显示，但是margin：auto一定不能省略，
如果省略，居中就不管用了*/
left:0;
right:0;
margin:auto;
}
.left{
width:33.3%;
height:500px;
border:4px solid red;
float:left;
}
.right{
width:33.3%;
height:500px;
border:4px solid green;
float:right;
}
</style>
<body>
<div class="main">
center
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>在做网页的过程中经常会遇到三列布局的情况，三列布局的解决方法常见的有三种。1.百分比布局（属于自适应）2.使用绝对定位3.使用float布局。
1.百分比布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三列布局</title>
</head>
<style>
.main{
width:33.3%;
height:500px;
border:4px solid yellow;
/*此处使用拔河效应让div居中显示，但是margin：auto一定不能省略，
如果省略，居中就不管用了*/
left:0;
right:0;
margin:auto;
}
.left{
width:33.3%;
height:500px;
border:4px solid red;
float:left;
}
.right{
width:33.3%;
height:500px;
border:4px solid green;
float:right;
}
</style>
<body>
<div class="main">
center
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>2.定宽的三列布局其实分好多种情况，只是用绝对定位、使用相对和绝对定位、使用定位和float
1.只使用绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三列布局</title>
</head>
<style>
.main{
width:800px;
height:500px;
border:4px solid yellow;
position: absolute;
left:0;
right:0;
margin:auto;
top:0;
}
.left{
width:300px;
height:500px;
border:4px solid red;
position: absolute;
left:0;
top:0;
}
.right{
width:300px;
height:500px;
border:4px solid green;
position: absolute;
right:0;
top:0;
}
</style>
<body>
<div class="main">center</div>
<div class="left">left</div>
<div class="right">right</div>
</body>
</html>2 使用相对和绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三列布局</title>
</head>
<style>
.main{
width:1200px;
height:500px;
border:4px solid yellow;
position: relative;
left:0;
right:0;
margin:auto;
top:0;
}
.center{
width:500px;
height: 500px;
border:4px solid pink;
position:absolute;
left:320px;
right:320px;
}
.left{
width:300px;
height:500px;
border:4px solid red;
position: absolute;
left:0;
top:0;
}
.right{
width:300px;
height:500px;
border:4px solid green;
position: absolute;
right:0;
top:0;
}
</style>
<body>
<div class="main">
<div class="center">center</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>3.使用定位和float
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三列布局</title>
</head>
<style>
.main{
width:1200px;
height:500px;
border:4px solid yellow;
left:0;
right:0;
position: relative;
margin:auto;
top:0;
}
.center{
width:500px;
height: 500px;
border:4px solid pink;
position:absolute;
left:360px;
right:300px;
}
.left{
width:300px;
height:500px;
border:4px solid red;
float:left;
}
.right{
width:300px;
height:500px;
border:4px solid green;
float:right;
}
</style>
<body>
<div class="main">
<div class="center">center</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>当使用float和position：absolute的时候，块元素脱离文档流，遇到复杂的情况可能会遮盖其他元素，此时需要给块元素定义z-index属性，另外使用float的时候，浮动可能会对其他元素有影响，此时需要清除浮动。在使用position：absolute和float后，行内元素具有display：inlie-block的属性。这是目前所能想到的需要注意的地方。
由于能力有限，总结的可能并不全，不过我会继续努力哒。
點擊查看更多內容
為 TA 點贊
評論
評論
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
正在加載中
感謝您的支持，我會繼續努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進行掃碼打賞哦