请使用firefox,chrome等最新浏览器浏览本站。

实现两列布局的方法

css3 阿豹 363次浏览 0个评论 扫描二维码

wdqw

下面总结一下实现如图效果的多做方法:

1.使用table-cell;

<div class="m-labellist2">
    <div class="row">
        <div class="cell left">
            收货人:
        </div>
        <div class="cell>
            王明
        </div>
    </div>
    <div class="row">
        <div class="cell left">
            地址:
        </div>
        <div class="cell">
            安徽省六安市分路口镇官安徽省六安市分路口镇官塘路22号
        </div>
    </div>
</div>

.m-labellist2{
	display: table;
	width:100%;
}
.m-labellist2 .row{
	display: table-row;

}
.m-labellist2 .cell{
	display: table-cell;

}
.m-labellist2 .left{
	width:80px;
}

使用dl dt dd + float

<dl class="m-labellist1">
    <dt>收货人:</dt>
    <dd>王明</dd>
    <dt>地址:</dt>
    <dd>安徽省六安市分路口镇官安徽省六安市分路口镇官塘路22号</dd>
</dl>
.m-labellist1 dt{
	float:left;
	width:80px;
}
.m-labellist1 dd{
	overflow: hidden;
}

float + margin

<div class="m-labellist4">
    <label>收货人:</label>
    <p>王明</p>
    <label>地址:</label>
    <p>安徽省六安市分路口镇官安徽省六安市分路口镇官塘路22号</p>
</div>
.m-labellist4 label{
    width:80px;
    float: left;
}
.m-labellist4 p{
    margin-left:80px;
}

转载请注明实现两列布局的方法
喜欢 (4)or分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到