我有2个div并排。我不知道他们的高度,它根据内容而改变。有没有办法确保他们永远是一样的高度,即使其中一个延伸,只有CSS?
我做了一个小提琴显示。我想要红色和蓝色的divs是相同的高度…
这是css:
#wrapper { width: 300px; } #left { width:50px; background: blue; float:left; height: 100%; /* sadly,this doesn't work... */ } #right { width:250px; background: red; float:left; }
解决方法
您可以尝试使用float,使用display:table-cell。你可能会发现一些旧的浏览器不了解这个规则。见下文:
#wrapper { display: table; // See FelipeAls comment below width: 300px; } #left { display: table-cell; width: 50px; background: blue; } #right { display: table-cell; width: 250px; background: red; }