欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

CSS两列布局_html/css_WEB-ITnose

程序员文章站 2022-05-24 08:30:13
...
在布局中,我们常常需要出现两列的情况,其中左边一列固定宽度,右边一列随着浏览器宽度变化而变化。如何实现呢?

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

						

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属性,代码如下:

				

其中css代码如下:

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

该程序完整代码位置: http://runjs.cn/code/xyhyg7tv
相关标签: CSS两列布局