HTML Float:左div相同大小无法正常工作 [英] Html float: left div same sizes not working

问题描述

我有2个div，其 float:left; 属性.我的问题是我已经尝试了所有东西，但看起来大小都不一样:

I have 2 div with float: left; attributes. My problem that I've tried everything but doesn't look the same size:

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

Here is my first <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;
}

推荐答案

@MysticUnicorn

@MysticUnicorn

解决此问题的最佳方法是Flex box- https://css-tricks.com/snippets/css/a-guide-to-flexbox/

The best way to fix this is Flex box - https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Git https://gist.github.com/bharadhwaj-g/42d53535d2311b00e8a215f2b4c518f6

这篇关于HTML Float:左div相同大小无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！