div 实现一行两列,一列宽度自定。

实现效果图如下:


div 实现一行两列,一列宽度自定。_第1张图片
2td.png

对齐方式,border 等样式可自行修改。

html 布局代码如下:

        
营业执照类型
请选择营业执照类型称
营业执照类型
请选择营业执照类型称超级超级超级超级次啊会从埃及记打家劫舍弟称超级超级超级超级次啊会从埃及记打家劫舍弟
营业执照类型
请选择营业执照类型称

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; 同样可以达到图片中的效果。。。

你可能感兴趣的:(div 实现一行两列,一列宽度自定。)