基础版
1.两列布局
两列布局是一侧固定，另一侧自适应。一般一个浮动，另一个设置margin，或者一个绝对定位，另一个设置margin，代码如下（浮动方法)
<style> .left{ float: left; width: 200px; background: green; height: 200px; } .right{ margin-left:200px; background: red; height: 200px; } </style> <body> <div class="left">左边左边左边左边左边左边</div> <div class="right">右边右边右边右边右边右边</div> </body> 2.三列布局
三列布局特点是其中两列宽度固定，剩下一个自适应，方法是两个浮动自适应那个设置margin，比如左右固定，中间自适应可以左右分别设置float为left，right，然后中间那个设置margin left right分别为左右两栏宽度。代码如下
<style> .left{ float: left; width: 200px; background: green; height: 200px; } .center{ margin: 0 300px 0 200px; background: yellow; height: 200px; } .right{ float: right; width:300px; background: red; height: 200px; } </style> <body> <div class="left">左边左边左边左边左边左边</div> <div class="right">右边右边右边右边右边右边</div> <div class="center">中间中间中间中间中间中间</div> </body> 进阶版
1.两列布局
还是那个效果，这次改用flex布局来写，代码如下：
<style> body{ display: flex; justify-content: flex-end; } .left{ flex: 1; background: green; height: 200px; } .right{ width:300px; background: red; height: 200px; } </style> <body> <div class="left">自适应自适应自适应自适应</div> <div class="right">固定固定固定固定固定固定</div> </body> <style> body{ display: flex; justify-content: space-between; } .left{ width:200px; background: green; height: 200px; } .right{ width:100px; background: red; height: 200px; } .center{ flex: 1; background: yellow; height: 200px; } </style> <body> <div class="left">固定固定固定固定固定固定</div> <div class="center">自适应自适应自适应自适应</div> <div class="right">固定固定固定固定固定固定</div> </body> 存在于面试中的版本
1.圣杯布局
特点是有个头部底部，中间是主要内容区，主要内容区又分成左中右三块，其中中间是最主要内容区，思路是朝一个方向浮动，再用负margin把挤下去的两侧给拉上来再设置相对定位，为了避免中间里面内容被拉上来的挡住再对中间内容设置padding。代码如下：
<style> header{ background: cadetblue; } footer{ background: antiquewhite; } .center{ width: 100%; background: coral; } .main{ float: left; width: 100%; background: yellow; height: 200px; } .main p{ padding: 0 100px 0 200px; } .left{ float: left; margin-left: -100%; width:200px; position: relative; left: 0; background: green; height: 200px; } .right{ float: left; margin-left: -100px; width:100px; position: relative; right: 100px; background: red; height: 200px; } </style> <body> <header>我是头部</header> <div class="center"> <div class="main"><p>我最重要</p></div> <div class="left">左边边</div> <div class="right">右边边</div> </div> <footer>我是底部</footer> </body> 2.双飞翼布局
与圣杯布局类似，只是在中间内容区加了个父元素，这样可以省略对左右栏设置相对定位。代码如下：
<style> header{ background: cadetblue; } footer{ background: antiquewhite; } .center{ width: 100%; background: coral; } .main-father{ width: 100%; float: left; background: blueviolet; } .main{ padding: 0 100px 0 200px; background: yellow; height: 200px; } .left{ float: left; margin-left: -100%; width:200px; background: green; height: 200px; } .right{ float: left; margin-left: -100px; width:100px; background: red; height: 200px; } </style> <body> <header>我是头部</header> <div class="center"> <div class="main-father"> <div class="main">我最重要</div> </div> <div class="left">左边边</div> <div class="right">右边边</div> </div> <footer>我是底部</footer> </body> 版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/233309.html原文链接：https://javaforall.net
