Html float:左边div相同的大小不起作用

时间:2018-01-18 00:48:46

标签: html css css3

我有2个具有float: left;属性的div。我的问题是我尝试了所有但看起来不一样的大小:

proof

这是我的第一个<div> css:

#container-div {
    overflow: hidden;
    display: table;
}
.first-column-container-div {
    width: 173px;
    float: left;
    margin-bottom: -500em;
    padding-bottom: 500em;
    display: table-cell;
}
.first-column-names-container-div {
    border: 1px solid black;
    width: 173px;
}
.first-column-names-h1 {
    -moz-transform: rotate(-90.0deg); /* FF3.5+ */
    -o-transform: rotate(-90.0deg); /* Opera 10.5 */
    -webkit-transform: rotate(-90.0deg); /* Saf3.1+, Chrome */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
    text-align: center;
    font-size: 1.3em;
}

和第二个<div>

.second-column-container-div {
    width: 173px;
    float: left;
    display: table-cell;
}
.second-column-values-container-div {
    border: 1px solid black;
    border-left: none;
    display: table-cell;
}

2 个答案:

答案 0 :(得分:2)

你只需要将第二个盒子的高度放到第一个盒子里。我们只能使用js给出这个高度。请遵循以下代码:

先拿第二个盒子的高度

var box2_height = $('.second-column-container-div').height();

然后将它放到第一个盒子的高度

$('.first-column-container-div').height(box2_height);

答案 1 :(得分:1)