如何利用CSS来自动调整布局元素的宽度

作者:     目录: CSS+HTML & PHP+MySQL     发表: 2010年03月07日

页面布局元素的宽度可自行调整以适应浏览器宽度或父元素的宽度。

具体示例预览

原理:利用margin属性,约束局部元素定位。

HTML:

<div id="page">
  <div id="right">
    right
  </div>
 <div id="left">
   Left
 </div>
</div>

CSS:


#page {
	background-color: #FF0000;
	min-height:300px;
}
#page #right {
	width: 300px;
	background-color: #0000FF;
	float: right;
	height: 200px;
}
#page #left {
	background-color: #FFFF00;
	margin-right: 350px;
	height: 200px;
}

代码说明:由于 #right设置float:left;所以需要根据实际情况给#page增加min-height属性,以防止#right的高度超过#page,造成#right溢出。也就是说尽量要保证#page的高度大于#right的高度。

2 个评论

  1. cloud说道:

    你的自动何在!?

  2. solodxg说道:

    原来就是以前经常用的左边固定宽度,右边自动宽度…

发表评论