圣杯布局和双飞翼布局main代码位置问题
老师，我发现圣杯布局和双飞翼布局代码中，main代码块放在最前面，这是为什么？
如果不考虑把main代码块放在最前面，那么使用float的left、right能够更加简单地实现同样的效果。将main放置在中间，也能够实现相同的效果，这也符合页面呈现的顺序。
老师可以谈一下这四种布局方式的优缺点吗？
以下是相关的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>左右围绕布局</title>
<style>
html{
min-width: 400px;
}
.col{
height: 100px;
}
.main{
width:100%;
background-color: #ccc;
}
.left{
width: 200px;
background-color: red;
}
.right{
width: 200px;
background-color: blue;
}
.sheng-bei{
padding: 0 200px;
}
.sheng-bei .col,.fei-yi .col{
float: left;
}
.sheng-bei .left{
margin-left: -100%;
position: relative;
left: -200px;
}
.sheng-bei .right{
margin-right: -200px;
}
.fei-yi .main main{
margin: 0 200px;
}
.fei-yi .left{
margin-left: -100%;
}
.fei-yi .right{
margin-left: -200px;
}
.float .left{
float: left;
}
.float .right{
float: right;
}
.float .main{
margin: 0 200px;
width: auto;
}
.middle .col{
float: left;
}
.middle .main{
background-color: transparent;
}
.middle .main main{
margin: 0 200px;
}
.middle .left{
margin-right: -200px;
}
.middle .right{
margin-left: -200px;
}
.clearfix::after{
content: '';
display: table;
clear: both;
}
</style>
</head>
<body>
<h2>圣杯布局</h2>
<section class="sheng-bei clearfix">
<div class="main col">main</div>
<div class="left col"></div>
<div class="right col"></div>
</section>
<h2>双飞翼布局</h2>
<section class="fei-yi clearfix">
<div class="main col">
<main>main</main>
</div>
<div class="left col"></div>
<div class="right col"></div>
</section>
<h2>main位置在最后</h2>
<section class="float clearfix">
<div class="left col"></div>
<div class="right col"></div>
<div class="main col">
main
</div>
</section>
<h2>main位置在中间</h2>
<section class="middle clearfix">
<div class="left col"></div>
<div class="main col">
<main>
main
</main>
</div>
<div class="right col"></div>
</section>
</body>
</html>5
收起
正在回答 回答被采纳积分+1
1回答
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星