三列布局（为什么要求10个字）-原创手记-慕课网

在做网页的过程中经常会遇到三列布局的情况，三列布局的解决方法常见的有两种。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的属性。这是目前所能想到的需要注意的地方。
由于能力有限，总结的可能并不全，不过我会继续努力哒。