0元购京东自营斐讯K2路由器返399元活动
置顶

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

作者:     目录: 小代码 & 网页设计     发表: 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. solodxg says:

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

  2. cloud says:

    你的自动何在!?

发表评论

电子邮件地址不会被公开。 必填项已用*标注