标签：
两列布局是非常常见的需求在实际项目中，实现的方式也有很多。这里提供几种实现方式和原理。供大家参考
页面基本布局如下代码所示：
1 <div class="main"> 2 <div class=‘left‘> 3 左侧 1 4 </div> 5 <div class=‘right‘> 6 右侧 1 7 <div>假如div很多的话</div> 8 <div>假如div很多的话</div> 9 <div>假如div很多的话</div> 10 <div>假如div很多的话</div> 11 假如内容很多的话 12 假如内容很多的话 13 假如内容很多的话 14 假如内容很多的话 15 假如内容很多的话 16 </div> 17 </div>
父元素.main 包含两个子div，left和right。这里只是简单举个例子，所以布局很简单，只要有效果就好。
一、内联div的方式：
众所周知，html元素存在块级元素，内联元素以及内联块级元素等多种属性。在基本的block和inline两种属性基础上衍生出的inline-block，因为具有两种基本属性的共有特性，所以在很多地方有特殊用处。这里主要用到inline-block的inline特性，将子元素设置为inline-block使得两者不会换行。同时左侧定宽，右侧自动即可。css如下：
.main{ width: 100%; height:500px; border: 1px solid blue; overflow: auto; } .left1{ display: inline-block; width: 200px; background:#ff4433; vertical-align: top; } .right1{ display: inline-block; background: pink; }
二、使用绝对定位
绝对定位有很多特性，其中比较重要的一点是，脱离文档流，相对父元素最近的不为static定位的来定位。这里主要就用到了该特性，因为脱离了文档流，所以紧邻的div不会自动换行，只需要设好外间距即可达到效果。代码如下：
.main{ width: 100%; height:500px; border: 1px solid blue; overflow: auto; } .left2{ position: absolute; width: 200px; background:#ff4433; } .right2{ margin-left: 200px; background: pink; }
这里不够严谨，最好父元素为相对定位，以免发生意想不到的定位情况。
三、float方式
既然提到了绝对定位脱离文档流的方式，相信大家还会想起来另一个狂放不羁爱脱离的属性，对就是浮动。既然特性相同当然可以实现相同效果。不过这里声明一下使用浮动的话注意要清除浮动，否则会带来一些意想不到的效果，这里简便起见就不清除了。
.main{ width: 100%; height:500px; border: 1px solid blue; overflow: auto; } .left3{ float: left; width: 200px; background:#ff4433; } .right3{ margin-left: background: pink; }
四：flex布局
弹性流式布局，这个是根据百分比来布局的。在h5中是非常常见的。因为手机型号的问题，所以根据百分比来布局是比较合适的。如果固定宽度的话，很容易就出现问题。有关flex的内容，这里不详细描述。只稍微提一下flex布局的基本思想：将设置为display: flex的元素作为一个flex容器，其子元素根据flex对应的值来分配父容器的宽度（默认从左至右排列）。例如div1:flex1，div2:flex2 ，则div1，div2则按1：2来分配父元素的宽度。但是如果子元素有设置固定宽度，则剩下的子元素按flex对应比例分配余下的区域。所以要实现左侧定宽的效果，只需设置左侧固定宽度即可，若左侧不定宽，可以按照比例来分配各子元素的宽度。代码如下：
.main4{ display: flex; flex-flew:row; } .left4{ width:200px; } .right4{ flex:3; }
或者非定宽的布局：
.main4{ display: flex; flex-flew:row; } .left4{ flex:1; } .right4{ flex:3; }
以上就是关于两列布局的几种实现方式，为了体现思路即可，所以很多地方不够严谨。希望能给需要的同学提供下参考和思路。还是那句话抛砖引玉，希望有兴趣的同学一起探讨。
转载请注明出处！！
标签：
原文地址：http://www.cnblogs.com/pqjwyn/p/5821346.html
