三列布局: 方法一:
.layout {
margin-bottom: 100px;
border: 1px solid blue;
}
.aside {
float: left;
width: 200px;
}
.main {
padding: 0 200px;
float: left;
width: 100%;
background-color: black;
}
.left {
position: relative;
margin-left: -100%;
left: -400px;
background-color: red;
}
.right {
position: relative;
left: -200px;
margin-left: -200px;
background-color: yellow;
}
<body>
<div class="layout">
<div class="main">1main mainmain mainmai nmainmainmain main mainma inmainma inma inmain main main mai nmai nma inmain mainma inm ain</div>
<div class="aside left">left</div>
<div class="aside right">right</div>
</div>
</body>
方法二:flow + overflow(BFC) 方法三:flex 方法四:grid 参考文章:mp.weixin.qq.com/s/fV5friirT…