这篇文章给大家分享的是有关如何使用CSS实现三栏布局的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
双飞翼布局：都左浮动，中间包一个盒子，padding 隔开两侧宽度。左右两侧都有 margin-left.
计算
安全
数据库
网络和加速
企业服务
<style>
body {
min-width: 550px;
}
.col {
float: left;
}
#main {
width: 100%;
height: 400px;
background-color: #ccc;
}
#main-wrap {
margin: 0 200px 0 200px;
}
#left {
width: 200px;
height: 400px;
margin-left: -100%;
background-color: red;
}
#right {
width: 200px;
height: 400px;
margin-left: -200px;
background-color: #ff0000;
}
</style>
<body>
<div id="container">
<div id="main" class="col">
<div id="main-wrap"></div>
</div>
<div id="left" class="col"></div>
<div id="right"class="col"></div>
</div>
</body>圣杯布局：中间不包盒子但还是有 padding。
<style>
#container{
padding: 0 190px 0 190px;
}
.col{
position: relative;
float: left;
}
#main{
width: 100%;
height: 400px;
background-color: #ddd;
}
#left{
width: 190px;
height: 400px;
background-color:red;
/* 离左边距本身的距离 */
margin-left: -100%;
/* 然后又自己向左移了本身的宽度*/
left: -190px;
}
#right{
width: 190px;
height: 400px;
background-color: yellow;
margin-left: -190px;
right: -190px;
}
</style>
<body>
<div id="container">
<div id="main" class="col"></div>
<div id="left" class="col"></div>
<div id="right"class="col"></div>
</div>
</body>拓展 左右布局
<style>
html,body{
height: 100%;
}
.left{
width: 256px;
height: 100%;
background-color: #ddd;
float: left;
}
.right{
width: 100%;
height: 100%;
margin-left: 256px;
background-color: rgb(230, 48, 48);
}
</style>
<body>
<div class="left"></div>
<div class="right"></div>
</body>感谢各位的阅读！关于“如何使用CSS实现三栏布局”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
