CSS七种方法实现分割中线
内容纲要
在项目开发过程中的会员中心页碰到了一个中线，然后发散思维，要求中间的线自适应高度，想了七种方案。
方案一：左边标签设置左边框，右边标签设置左边框，利用负margin边框重叠
.middle_line_wrap1 .row {
padding-left:100px; /* 保证dd的位置，不管有没有dt，dd的位置都距离左边这么远 */
zoom:1 /*闭合浮动，针对IE*/
}
.middle_line_wrap1 .row:after { /*闭合浮动针对支持该伪类的现代浏览器*/
content:"\20";
clear:both;
visibility:hidden;
display:block;
height:0
}
.middle_line_wrap1 dt {
width:99px;
margin-left:-100px; /* 保证dd的位置，不管有没有dt，dd的位置都距离左边这么远 */
float:left; /*让元素可以定宽，而又保持布局，不可以用inline-block,inline-block会引起文字元素间的莫名间隙*/
text-align:right;
position:relative;
z-index:1; /*兼容IE6，为什么需要使用，原因不详*/
border-right:1px solid #CECECE
}
.middle_line_wrap1 dd {
border-left:1px solid #CECECE;
float:left; /*解决dd元素边框不识别多行的总高，若没有，则本元素边框为一行元素的高而不是多行*/
padding-left:10px;
margin-left:-1px;
position:relative;
z-index:1px; /*兼容IE6，为什么需要使用，原因不详*/
}
<div class="middle_line_wrap1"><dl class="row"><dt>姓名：</dt><dd>LYuShine</dd></dl></div>
很“保险”（使程序输出的时候左边和右边任意一边内容为空甚至标签不输出都正常显示），多了一个多余标签。
方案二：设置父容器左边框，父容器margin-left,子元素父margin拉回。
.middle_line_wrap2 .iner {
border-left:1px solid #CECECE;
margin-left:100px; /*其实这个使用在.member_info2也是可以的，这里考虑.member_info2为大体盒子，为了不造成不必要的布局影响麻烦*/
}
.middle_line_wrap2 .row {
padding-left:100px; /* 保证dd的位置，不管有没有dt，dd的位置都距离左边这么远 */
zoom:1 /*闭合浮动，针对IE*/
}
.middle_line_wrap2 .row:after { /*闭合浮动针对支持该伪类的现代浏览器*/
content:"\20";
clear:both;
visibility:hidden;
display:block;
height:0
}
.middle_line_wrap2 dt {
width:100px;
float:left;
text-align:right;
margin-left:-200px; /* 保证dd的位置，不管有没有dt，dd的位置都距离左边这么远 */
}
.middle_line_wrap2 dd {
float:left;
margin-left:-100px;
padding-left: 10px;
}
<div class="middle_line_wrap2">
<div class="iner"><dl class="row"><dt>姓名：</dt><dd>LYuShine</dd></dl></div>
</div>
很保险，可维护性扩展性低，如果父容器要设置外面的边框则需再外套一个标签。
方案三：定义一个 “线”的class，绝对定位。
.middle_line_wrap3 .row {
padding-left:100px; /* 保证dd的位置，不管有没有dt，dd的位置都距离左边这么远 */
zoom:1 /*闭合浮动，针对IE*/
}
.middle_line_wrap3 {
position:relative;
zoom:1; /* 截断过于长的线*/
overflow:hidden;/* 截断过于长的线*/
}
.middle_line_wrap3 .line {
border-left:1px solid #CECECE;
width:10px;
height:100%;/* 其实可以写100%，识别父容器的高度，但是IE6下100%没有正确识别，这里用一个较大数值*/
_height:10000px;
position:absolute;
top:0;
left:100px
}
.middle_line_wrap3 .row:after { /*闭合浮动针对支持该伪类的现代浏览器*/
content:"\20";
clear:both;
visibility:hidden;
display:block;
height:0
}
.middle_line_wrap3 dt {
width:100px;
margin-left:-100px; /* 保证dd的位置，不管有没有dt，dd的位置都距离左边这么远 */
float:left; /*让元素可以定宽，而又保持布局，不可以用inline-block,inline-block会引起文字元素间的莫名间隙*/
text-align:right;
}
.middle_line_wrap3 dd {
float:left; /*解决dd元素边框不识别多行的总高，若没有，则本元素边框为一行元素的高而不是多行*/
padding-left:10px;
}
<div class="middle_line_wrap3">
<div class="line"></div>
<dl class="row"><dt>姓名：</dt><dd>LYuShine</dd></dl></div>
可全站通用,对付IE6需要设置一个及长的高度不太合理。
方案四：使用图片背景平铺于内容区
代码不贴了：
多余了一张图片，而且一张图只能对应一个宽度，扩展性低。
方案五：利用图片转base64编码
代码不贴了：
一般转码后的编码比另存的图片大1/3，base64编码不兼容IE/IE7，一张图适应一个宽度。
方案六：使用表格table，利用其高度自适应性
.middle_line_wrap5 {
border-collapse:collapse
}
.middle_line_wrap5 td {
padding:10px 0
}
.middle_line_wrap6 .intro {
width:100px;
text-align:right;
border-right:1px solid #CECECE;
vertical-align:text-top
}
.middle_line_wrap6 .info {
padding-left:10px;
font-weight:bold
}
<table class="middle_line_wrap5">
<tbody>
<tr>
<td class="intro">姓名：</td>
<td class="info">LYuShine</td>
</tr>
</tbody>
</table>
方案七：左边标签绝对定位自适应容器高度
.middle_line_wrap7 .row {
padding-left:100px; /* 保证dd的位置，不管有没有dt，dd的位置都距离左边这么远 */
zoom:1; /*闭合浮动，针对IE*/
position:relative;
}
.middle_line_wrap7 .row:after { /*闭合浮动针对支持该伪类的现代浏览器*/
content:"\20";
clear:both;
visibility:hidden;
display:block;
height:0
}
.middle_line_wrap7 dt {
width:100px;
float:left;
text-align:right;
position:absolute;
height:100%;
top:0;
left:100px;
margin-left:-100px; /* 保证dd的位置，不管有没有dt，dd的位置都距离左边这么远 */
}
.middle_line_wrap7 dd {
float:left;
padding-left: 10px;
border-left:1px solid #CECECE;
}
<div class="middle_line_wrap7"><dl class="row"><dt>姓名：</dt><dd>LYuShine</dd></dl></div>
转载： CSS七种方法实现分割中线
