div 多列等高对齐

最新推荐文章于 2021-06-19 20:30:22 发布

weixin_33720078

最新推荐文章于 2021-06-19 20:30:22 发布

阅读量168

点赞数

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/thc/blog/298398

为什么80%的码农都做不了架构师？>>>

.detail_row {
    overflow :hidden;
    font-size :12px;
}
.detail_col_one, .detail_col_two, .detail_col_three, .detail_col_four,.one-row-label, .one-row-content {
    margin-bottom :-2000px;
    padding-bottom :2000px;
}
.detail_col_one, .detail_col_three, .one-row-label {
	width : 80px;
	text-align: right;
	font-weight: bold;
}
.detail_col_two, .detail_col_four {
	padding-left: 8px;
	width: 35%;
}
.detail_col_two:hover, .detail_col_four:hover, .one-row-content:hover {
	background-color: #EFFEFD;
	/* font-size: 14px; */
}	
.detail_col_one, .detail_col_two, .detail_col_three, .detail_col_four, .one-row-label, .one-row-content {
	float :left;
	line-height: 170%;
}
.one-row-content {
	padding-left: 8px;
	width : 80%;
}

<div class="detail_row">
	<div class="detail_col_one">
		<nobr><fmt:message key="AddressBook.Detail.Mobile" /> :</nobr>
	</div>
	<div id="viewMobile" class="detail_col_two"></div>
	<div class="detail_col_three">
		<nobr><fmt:message key="AddressBook.Detail.Email" /> :</nobr>
	</div>
	<div id="viewEmail"  class="detail_col_four"></div>
</div>
<div class="detail_row">
	<div class="one-row-label">
		<nobr><fmt:message key="AddressBook.Detail.Jobdesc" /> :</nobr>
	</div>
	<div id="viewJobdesc" class="one-row-content"></div>
</div>

转载于:https://my.oschina.net/thc/blog/298398