Html浮动：左div相同大小不起作用

我有两个div，其中

float:left属性。我的问题是，我已经尝试了所有方法，但看起来大小不一样：


这是我的第一个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;
}

第二个
：

您只需将第二个长方体的高度指定给第一个长方体。我们只能用js给出这个高度。请按照以下代码操作：

首先取第二个盒子的高度

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

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

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

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

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

您只需将第二个长方体的高度指定给第一个长方体。我们只能用js给出这个高度。请按照以下代码操作：

首先取第二个盒子的高度

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

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

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

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

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

@神秘独角兽

修复此问题的最佳方法是Flex box-

Git
@神秘独角兽

修复此问题的最佳方法是Flex box-

Git
@神秘独角兽如果对你有用，请接受它。谢谢。@神秘独角兽如果对你有用，请接受它。非常感谢。