实现效果图如下:
对齐方式,border 等样式可自行修改。
html 布局代码如下:
<div class="twotdrow">
<div class="left">
<div class="name">营业执照类型</div>
</div>
<div class="right">
<div class="value">请选择营业执照类型称</div>
</div>
</div>
<div class="twotdrow">
<div class="left">
<div class="name">营业执照类型</div>
</div>
<div class="right">
<div class="value">请选择营业执照类型称超级超级超级超级次啊会从埃及记打家劫舍弟称超级超级超级超级次啊会从埃及记打家劫舍弟</div>
</div>
</div>
<div class="twotdrow">
<div class="left">
<div class="name">营业执照类型</div>
</div>
<div class="right">
<div class="value">请选择营业执照类型称</div>
</div>
</div>
css 样式如下:
.twotdrow{
display:table;
width:100%;
border-bottom: 1px solid red;
padding: 10px 0px;
}
.twotdrow .left{
display:table-cell;
width:120px;
vertical-align:middle;
}
.twotdrow .right{
display:table-cell;
text-align:right;
vertical-align:middle;
}
.twotdrow .left .name{
margin-left:10px;
}
.twotdrow .right .value{
text-align:right;
margin-right:10px;
}
发现存在一个问题,就是使用了display:table好像多出了一些高度。还没发现怎么解决。
那么给大家说另一个写法:和上面差不多,把 .twotdrow 中display:table去掉,left中去掉display:table-cell;加入float:left; right中去掉display:table-cell,加入overflow:hidden; 同样可以达到图片中的效果。。。