我有2个具有float: left;
属性的div。我的问题是我尝试了所有但看起来不一样的大小:
这是我的第一个<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;
}
答案 0 :(得分:2)
你只需要将第二个盒子的高度放到第一个盒子里。我们只能使用js给出这个高度。请遵循以下代码:
先拿第二个盒子的高度
var box2_height = $('.second-column-container-div').height();
然后将它放到第一个盒子的高度
$('.first-column-container-div').height(box2_height);
答案 1 :(得分:1)
@MysticUnicorn
解决此问题的最佳方法是Flex框 - https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Git https://gist.github.com/bharadhwaj-g/42d53535d2311b00e8a215f2b4c518f6