1、左边固定，右边自适应
<div> <!--最外层容器-->
<div style="float:right;margin:0 0 0 -215px; width:100%"> <!--右边部分容器，这个是重点，"float:right"的div一定要写到前面，否则会出现结构混乱，”margin:0px 0px 0px -215px“是用来为左边的部分空出空间-->
<div style="margin:0 0 0 215px; background:#e4e4e4">这里是右边的内容</div> <!--”margin:0 0 0 215px“空出左边空间-->
</div>
<div style="float:left;width:200px; background:#669999">这里左边部分</div> <!--左边部分容器，有float:left属性的div要放在有float:right属性的div后面，才能保持结构--></div>
————————————————————————————————————————————
2、右边固定，左边自适应，跟上一个最大的不同点就是，左右两个div容器的代码的前后位置换了，原因就是"float:rihgt"一定要在"float:left"前面。
<div>
<div style="float:right;width:200px; background:#669999">这里右边部分</div>
<div style="float:left;margin:0 -215px 0 0; width:100%">
<div style="margin:0 215px 0 0; background:#e4e4e4">这里是左边的内容</div>
</div>
</div>
——————————————————————————————————————————————
完整代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>左右分栏</title>
<h1> 右边自适应 </h1>
<div><!--最外层容器-->
<div style="float:right;margin:0 0 0 -215px; width:100%"><!--右边部分容器，这个是重点，"float:right"的div一定要写到前面，否则会出现结构混乱，”margin:0px 0px 0px -215px“是用来为左边的部分空出空间-->
<div style="margin:0 0 0 215px; background:#e4e4e4">这里是右边的内容</div><!--”margin:0 0 0 215px“空出左边空间-->
</div>
<div style="float:left;width:215px; background:#669999">这里左边部分</div><!--左边部分容器，有float:left属性的div要放在有float:right属性的div后面，才能保持结构-->
</div>
<div>
<h1> 左边自适应 </h1>
<div style="float:right;width:215px; background:#669999">这里右边部分</div>
<div style="float:left;margin:0 -215px 0 0; width:100%">
<div style="margin:0 215px 0 0; background:#e4e4e4">这里是左边的内容</div>
</div>
</div>
</body>
</html>
已为社区贡献1条内容
所有评论(0)