我学习的三种三栏（左中右）布局⽅法
我学习的三种三栏（左中右）布局⽅法（不想要⾃适应的话设置⼀个宽度即可）
1. 绝对定位⽅法，两边⽤绝对定位固定在窗⼝两边，中间采⽤⾃适应宽度，利⽤margin属性把两边撑开。代码如下：
<style type="text/css">
* {margin: 0;}
.left{position: absolute;top: 0;left: 0;width: 300px;height: 300px;background: #ccc;}
.right{position: absolute;top: 0;right: 0;width: 300px;height: 300px;background: #ccc;}
.main{margin: 0 300px;height: 300px;background: #f00;}
</style>
<body>
<div class="left">左列</div>
<div class="main">中间</div>
<div class="right">右列</div>
</body>
优点：⽐较简单容易，受到内部影响不⼤
缺点：中间有最⼩宽度的限制，当宽度⼩到⼀定值，会发⽣元素重叠的情况
2. margin负值⽅法，此⽅法要让中间内容放在最前⾯，并且要使⽤⼀个容器把其包起来，外层width设置为100%，随屏幕⾃适应，然后
让外层元素整体浮动，内层为真正的内容，左右两列均采⽤margin负值定位，左列左浮动，然后设置margin-left为-100%，右列也设置左浮动，然后设置margin-left为⾃⾝的宽度的负值。代码如下：
<style type="text/css">
* {margin: 0;}
.wrap {width: 100%;height: 300px;float: left;}
.wrap .main {margin: 0 300px;height: 300px;background: #f00;}
.left,.right {float: left;width: 300px;height: 300px;background: #ccc;}
.left {margin-left: -100%;}
.right {margin-left: -300px;}
</style>
<body>
<div class="wrap">
<div class="main">中间</div>
</div>
<div class="left">左列</div>
<div class="right">右列</div>
</body>
优点：三列相互关联，受到内部影响不⼤css布局左边固定右边自适应
缺点：⽐较难理解，相对其他⽐较复杂
3. 浮动⽅法，此⽅法要让中间内容放在最后⾯，左列左浮动，右列右浮动，中间利⽤浮动的跟随性，实现三列⾃适应布局，代码如下：
<style type="text/css">
* {margin: 0;}
.left {float: left;width: 300px;height: 300px;background: #ccc;}
.right {float: right;width: 300px;height: 300px;background: #ccc;}
.main {margin: 0 300px;height: 300px;background: #f00;}
</style>
<body>
<div class="left">左列</div>
<div class="right">右列</div>
<div class="main">中间</div>
</body>
优点：简单易懂，代码简洁
缺点：中间内容不能使⽤clear：both属性
  　除了第⼀种绝对定位⽅法可以不在意左中右三列div的顺序，第⼆种margin负值和第三种浮动⽅法都需要注意左中右三列div的顺序，第⼆中⽅法需要给中间内容套⼀层⽗级div元素。以上就是我学习的三种三列⾃适应布局的⽅法。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。