宽度自适应的div+css的BOX
参考:
http://space.cnblogs.com/group/topic/3617/
http://www.dynamicdrive.com/style/layouts/item/css-left-and-right-frames-layout/
一、效果：
二、素材：
三、代码：
<style type="text/css">
.box{}
.box .box_tit{position:relative;}
.box .box_tit .box_tit_1{position: absolute;top: 0; overflow: hidden; height: 100%;left: 0; right:auto;width: 2px;}
.box .box_tit .box_tit_2{position: absolute;top: 0; overflow: hidden; height: 100%;left: 2px; right:2px; }
.box .box_tit .box_tit_3{position: absolute;top: 0; overflow: hidden; height: 100%;left: auto;right:0; width: 2px;}
.box .box_tit{height:29px; line-height:29px; vertical-align:middle;}
.box .box_tit .box_tit_1{background:url("box.png") left 0px;width:2px;}
.box .box_tit .box_tit_2{background:url("box.png") left -30px; padding-left:10px;}
.box .box_tit .box_tit_3{background:url("box.png") right 0px;}
.box .box_con{ border:solid 1px #f6b54f; border-top:0; min-height:200px; padding:10px; }
* html body .b2bbox{ /*IE6 hack*/
padding: 0 2px 0 2px; /*Set value to (0 WidthOfRightFrameDiv 0 WidthOfLeftFrameDiv)*/
/*ie6 bug*/
}
* html .tit2{ /*IE6 hack*/
height: 100%;
width: 100%;
}
</style>
<body>
<div class="box">
<div class="box_tit">
<div class="box_tit_1"></div>
<div class="box_tit_2">标题</div>
<div class="box_tit_3"></div>
</div>
<div class="box_con">
<ul>
<li>内容</li>
<li>内容</li>
<li>内容</li>
<li>内容</li>
<li>内容</li>
<li>内容</li>
</ul>
</div>
</div>
</body>
浙公网安备 33010602011771号