手记

三列布局(为什么要求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的属性。这是目前所能想到的需要注意的地方。
由于能力有限,总结的可能并不全,不过我会继续努力哒。

0人推荐
随时随地看视频
慕课网APP