CSS两列布局

来源：互联网发布：linq to sql count 编辑：程序博客网时间：2024/05/08 03:47

在布局中，我们常常需要出现两列的情况，其中左边一列固定宽度，右边一列随着浏览器宽度变化而变化。如何实现呢？

传统的方法是利用float将左部分浮动起来，再通过margin将右部分右移，得到所需效果，代码如下：

<!--两列布局，其中左侧固定，右侧自适应--><div class="left background-color-red height-60 width-300"></div><div class=" background-color-black height-60 margin-left-301 "></div>

css代码如下：

.color-blue {color:blue;}.color-yellow {color:yellow;}.background-color-blue {background-color: blue;}.background-color-black {background-color:black;}.background-color-red {background-color:red;}.background-color-yellow {background-color:yellow;}.height-60 {height:60px;}.border-color-red {border: 2px solid #ff0000;}.left {float:left;}.right {float:right;}.font-size-20{font-size: 20px;}.line-height-1_5{line-height: 1.5;}.width-1 {width:100%;}.width-auto {width:auto;}.width-300 {width:300px;}.width-960 {width:960px;}.width-100 {width:100%;}.inline-block {display: inline-block;}/*第一种水平居中方式*/.center-1 {margin: 0 auto;}/*第二种水平居中方式*/.center-2 {position:absolute;left:50%;margin-left:-480px;}.margin-left-301 {margin-left:301px;}

这样就可以得到所想要的效果，如图：

在CSS3推出的盒布局中，可以使用更加简便的方法来更加灵活的控制这样的布局需求，就是利用了box-flex属性，代码如下：

<!--两列布局，其中左侧固定，右侧自适应--><div class="box"><!--盒布局--><div class="background-color-black height-60 width-300"></div><div class="background-color-red height-60 flex"></div></div>

其中css代码如下：

.box {display: box;display: -webkit-box;}.flex {-webkit-box-flex: 1;}

该程序完整代码位置：http://runjs.cn/code/xyhyg7tv

1 0