DIVで複数の列を同じ高さに揃えるサンプルプログラム

DIVコード:
.detail_row {
overflow :hidden;
font-size :16px;
}
.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>

Comments are closed.