Question

我有一个表格表，在同一行上有不同大小的div，如下所示：

enter image description here

如何使标签高度相同且垂直对齐：底部？

一定很容易修复 - 我只是看不出我犯的错误。我尝试了很多东西，阅读了很多SO帖子，花了3个多小时试图自己解决这个问题。我很难过！

这是我的CSS和HTML：

＆＃13;

    .wrapper {
        border-spacing: 0px 0px;
        display: table;
        font-family: verdana;
        font-size: 12px;
        width: 100%;
    }
    
    .dhtr {
        display: table-row;
    
    }
    
    .label01 {
        -webkit-box-sizing: border-box;  /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;  /* Firefox, other Gecko */
        box-sizing: border-box;
        direction: ltr;
        display: table-cell;
        float: left;
        font-weight: bold;
        padding: 2px;
        padding-right: 10px;
        text-align: left;
        vertical-align: bottom;
        width: calc(100% - 15% - 15% - 60px - 72px - 15%);  /* subtract the lengths of all five divs */
        word-wrap: break-all;
    
        background-color: aqua;
    
    }
    
    .label02 {
        -webkit-box-sizing: border-box;  /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;  /* Firefox, other Gecko */
        box-sizing: border-box;  /* Opera/IE 8+ */
        direction: ltr;
        display: table-cell;
        float: left;
        font-weight: bold;
        height: 100%;
        overflow: hidden;
        padding: 2px;
        padding-left: 10px;
        padding-right: 10px;
        text-align: left;
        vertical-align: bottom;
        width: 15%;
        word-wrap: break-all;
    
        background-color: fuchsia;
    }
    
    .label03 {
        -webkit-box-sizing: border-box;  /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;  /* Firefox, other Gecko */
        box-sizing: border-box;  /* Opera/IE 8+ */
        direction: ltr;
        display: table-cell;
        float: left;
        font-weight: bold;
        overflow: hidden;
        padding: 2px;
        padding-left: 10px;
        padding-right: 10px;
        text-align: left;
        vertical-align: bottom;
        width: 15%;
        word-wrap: break-all;
    
        background-color: khaki;
    }
    
    .label04 {
        -webkit-box-sizing: border-box;  /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;  /* Firefox, other Gecko */
        box-sizing: border-box;  /* Opera/IE 8+ */
        direction: ltr;
        display: table-cell;
        float: left;
        font-weight: bold;
        overflow: hidden;
        padding: 2px;
        padding-left: 10px;
        padding-right: 10px;
        text-align: center;
        vertical-align: bottom;
        width: 60px;
        word-wrap: break-all;
    
        background-color: mediumpurple;
    }
    
    .label05 {
        -webkit-box-sizing: border-box;  /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;  /* Firefox, other Gecko */
        box-sizing: border-box;  /* Opera/IE 8+ */
        direction: ltr;
        display: table-cell;
        float: left;
        font-weight: bold;
        overflow: hidden;
        padding: 2px;
        padding-left: 10px;
        padding-right: 10px;
        text-align: center;
        vertical-align: bottom;
        width: 72px;
        word-wrap: break-all;
    
        background-color: palegreen;
    }
    
    .label06 {
        -webkit-box-sizing: border-box;  /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;  /* Firefox, other Gecko */
        box-sizing: border-box;  /* Opera/IE 8+ */
        direction: ltr;
        display: table-cell;
        float: left;
        font-weight: bold;
        overflow: hidden;
        padding: 2px;
        padding-left: 10px;
        padding-right: 10px;
        text-align: left;
        vertical-align: bottom;
        width: 15%;
        word-wrap: break-all;
    
        background-color: teal;
    }
    
    .dctr {
        width: 100%;
    }
    
    .content01 {
        -webkit-box-sizing: border-box;  /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;  /* Firefox, other Gecko */
        box-sizing: border-box;  /* Opera/IE 8+ */
        direction: ltr;
        display: table-cell;
        float: left;
        overflow: hidden;
        padding: 2px;
        padding-bottom: 10px;
        padding-right: 10px;
        text-align: left;
        vertical-align: top;
        width: calc(100% - 15% - 15% - 60px - 72px - 15%);  /* subtract the lengths of all five divs */
        word-wrap: break-all;
    
        background-color: coral;
    }
    
    .content02 {
        -webkit-box-sizing: border-box;  /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;  /* Firefox, other Gecko */
        box-sizing: border-box;  /* Opera/IE 8+ */
        direction: ltr;
        display: table-cell;
        float: left;
        overflow: hidden;
        padding: 2px;
        padding-bottom: 10px;
        padding-left: 10px;
        padding-right: 10px;
        text-align: left;
        vertical-align: top;
        width: 15%;
        word-wrap: break-all;
    
        background-color: gold;
    }
    
    .content3 {
        -webkit-box-sizing: border-box;  /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;  /* Firefox, other Gecko */
        box-sizing: border-box;  /* Opera/IE 8+ */
        direction: ltr;
        display: table-cell;
        float: left;
        overflow: hidden;
        padding: 2px;
        padding-bottom: 10px;
        padding-left: 10px;
        padding-right: 10px;
        text-align: left;
        vertical-align: top;
        width: 15%;
        word-wrap: break-all;
    
        background-color: lime;
    }
    
    .content04 {
        -webkit-box-sizing: border-box;  /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;  /* Firefox, other Gecko */
        box-sizing: border-box;  /* Opera/IE 8+ */
        direction: ltr;
        display: table-cell;
        float: left;
        overflow: hidden;
        padding: 2px;
        padding-bottom: 10px;
        padding-left: 10px;
        padding-right: 10px;
        text-align: center;
        vertical-align: bottom;
        width: 60px;
        word-wrap: break-all;
    
        background-color: orange;
    }
    
    .content05 {
        -webkit-box-sizing: border-box;  /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;  /* Firefox, other Gecko */
        box-sizing: border-box;  /* Opera/IE 8+ */
        direction: ltr;
        display: table-cell;
        float: left;
        overflow: hidden;
        padding: 2px;
        padding-bottom: 10px;
        padding-left: 10px;
        padding-right: 10px;
        text-align: center;
        vertical-align: bottom;
        width: 72px;
        word-wrap: break-all;
    
        background-color: red;
    }
    
    .content06 {
        -webkit-box-sizing: border-box;  /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;  /* Firefox, other Gecko */
        box-sizing: border-box;  /* Opera/IE 8+ */
        direction: ltr;
        display: table-cell;
        float: left;
        overflow: hidden;
        padding: 2px;
        padding-bottom: 10px;
        padding-left: 10px;
        padding-right: 10px;
        text-align: left;
        vertical-align: bottom;
        width: 15%;
        word-wrap: break-all;
    
        background-color: wheat;
    }

＆＃13;

 <div class="wrapper">
        <div class="dhtr">
            <div class="label01">License</div>
            <div class="label02">License Type</div>
            <div class="label03">Issuing Authority</div>
            <div class="label04">Years Held</div>
            <div class="label05">Expiry</div>
            <div class="label06">Restrictions</div>
        </div>
        <div class="dctr">
            <div class="content01" >My Licence Details Description</div>
            <div class="content02">Car - Manual</div>
            <div class="content03">My Issuing Authority</div>
            <div class="content04">12</div>
            <div class="content05">01/2017</div>
            <div class="content06">None</div>
        </div>
    </div>

＆＃13;

Answer 1

试试这样：

删除所有float:left并使用float: none;

Answer 2

@Amit在浮动上是正确的。您在使用display: table-cell;

时无需使用

我也花时间清理CSS，让我疯狂;）

<div class="wrapper">
<div class="dhtr">
    <div class="label01">License</div>
    <div class="label02">License Type</div>
    <div class="label03">Issuing Authority</div>
    <div class="label04">Years Held</div>
    <div class="label05">Expiry</div>
    <div class="label06">Restrictions</div>
</div>
<div class="dctr">
    <div class="content01">My Licence Details Description</div>
    <div class="content02">Car - Manual</div>
    <div class="content03">My Issuing Authority</div>
    <div class="content04">12</div>
    <div class="content05">01/2017</div>
    <div class="content06">None</div>
</div>
</div>

* {
    -webkit-box-sizing: border-box;        
    -moz-box-sizing: border-box;       
    box-sizing: border-box;
}
.wrapper {
    border-spacing: 0px 0px;
    display: table;
    font-family: verdana;
    font-size: 12px;
    width: 100%;
}
.dhtr, .dctr {
    display: table-row;
}
.dhtr > div, .dctr > div {
    direction: ltr;
    display: table-cell;
    font-weight: bold;
    text-align: left;
    vertical-align: bottom;
    overflow: hidden;
    word-wrap: break-all;
}
.label01 {
    padding: 2px;
    padding-right: 10px;
    width: calc(100% - 15% - 15% - 60px - 72px - 15%);
    /* subtract the lengths of all five divs */
    background-color: aqua;
}
.label02 {
    height: 100%;
    padding: 2px 10px 10px 2px;
    width: 15%;
    background-color: fuchsia;
}
.label03 {
    padding: 2px 10px 10px 2px;
    width: 15%;
    word-wrap: break-all;
    background-color: khaki;
}
.label04 {
    padding: 2px 10px 10px 2px;
    text-align: center;
    width: 60px;
    background-color: mediumpurple;
}
.label05 {
    padding: 2px 10px 10px 2px;
    text-align: center;
    width: 72px;
    background-color: palegreen;
}
.label06 {
    padding: 2px 10px 10px 2px;
    width: 15%;
    background-color: teal;
}
.dctr {
    width: 100%;
}
.content01 {
    padding: 2px 10px 10px 2px;
    vertical-align: top;
    width: calc(100% - 15% - 15% - 60px - 72px - 15%);
    /* subtract the lengths of all five divs */
    background-color: coral;
}
.content02 {
    padding: 2px 10px 10px;
    vertical-align: top;
    width: 15%;
    background-color: gold;
}
.content3 {
    padding: 2px 10px 10px;
    vertical-align: top;
    width: 15%;
    background-color: lime;
}
.content04 {
    padding: 2px 10px 10px;
    width: 60px;
    background-color: orange;
}
.content05 {
    padding: 2px 10px 10px;
    text-align: center;
    width: 72px;
    background-color: red;
}
.content06 {
    padding: 2px 10px 10px;
    width: 15%;
    background-color: wheat;
}

使div在行间高度相等

2 个答案: