日期:2014-05-17  浏览次数:20528 次

CSS-两种左侧固定宽度,右侧自适应宽度的方法
1、负外边距实现

DIV结构如下。这是经典的左右两列布局的DIV结构。

<div class="wrap">
<div class="left">
<div class="leftwrap">
aaaa
</div>
</div>
<div class="right">aaaa</div>
</div>

CSS样式如下,主要是利用负的外边距,造成.right的宽度为0,再加上float:left的效果,CSS会尽可能将.right往上移动到一个适合的位置。而.leftwrap设置的margin-right:200px为右侧空出的200px刚好能够容纳.right。
.wrap{

}

.left{
width:100%;
float:left;
}
.left .leftwrap{
margin-right:200px;
}
.right{
border:1px solid black;
margin-left:-194px;
border::1px solid black;
width:191px;
float:left;
}

1 楼 luju133 2012-06-27  
厉害哦。。