div+css左右结构
div+css 左右结构
1、左边固定，右边⾃适应
<div>  <!--最外层容器-->
<div  >    <!--右边部分容器，这个是重点，"float:right"的div⼀定要写到前⾯，否则会出现结构混乱，”margin:0px 0px 0px -215px“是⽤来为左边的部分空出空间-->
<div  >这⾥是右边的内容</div>  <!--”margin:0 0 0 215px“空出左边空间-->
css布局左边固定右边自适应
</div>
<div  >这⾥左边部分</div>    <!--左边部分容器，有float:left属性的div要放在有float:right属性的div后⾯，才能保持结构--></div>
————————————————————————————————————————————
2、右边固定，左边⾃适应，跟上⼀个最⼤的不同点就是，左右两个div容器的代码的前后位置换了，原因就是"float:rihgt"⼀定要在"float:left"前⾯。
<div>
<div >这⾥右边部分</div>
<div >
<div >这⾥是左边的内容</div>
</div>
</div>
——————————————————————————————————————————————
完整代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>左右分栏</title>
<h1> 右边⾃适应 </h1>
<div><!--最外层容器-->
<div ><!--右边部分容器，这个是重点，"float:right"的div⼀定要写到前⾯，否则会出现结构混乱，”margin:0px 0px 0px -215px“是⽤来为左边的部分空出空间-->
<div >这⾥是右边的内容</div><!--”margin:0 0 0 215px“空出左边空间--> </div>
<div >这⾥左边部分</div><!--左边部分容器，有float:left属性的div要放在有float:right属性的div后⾯，才能保持结构-->
</div>
<div>
<h1> 左边⾃适应 </h1>
<div >这⾥右边部分</div>
<div >
<div >这⾥是左边的内容</div>
</div>
</div>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。