我想在 2 列中显示“右”和“左”元素。右边的元素应该垂直拉伸(stretch)到父元素的整个高度。标准解决方案为每列使用一个额外的容器。但是,在我的情况下,这些列没有语义,它们只是为了显示。此外,由于我的元素将有许多这种结构的实例,添加容器元素会带来很多困惑。
<div class='container'>
<div class='right'>
<div class='left'>
<div class='left'>
<div class='left'>
<div class='left'>
</div>
被低估的“display:table-cell”几乎可以工作,但有一些限制,所以这个选项被淘汰了。 CSS“display:flex”是我能想到的唯一其他可能的解决方案。我找不到一个有效的例子,我的尝试也失败了,所以我希望你能帮助我。提前致谢,-T
最佳答案
display:flex
很棒,但浏览器支持可能是个问题。 Flex guide .
像下面这样的东西有什么问题?
HTML
<div class="left">
</div><!--
--><div class="right">
</div>
CSS
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
width: 100%;
max-width: 500px;
min-width: 200px;
margin: 0 auto;
}
div {
display: inline-block;
height: 100%;
}
.left {
background: #F00;
width: 50%;
}
.right {
background: #000;
width: 50%;
}
关于CSS flex 布局 : 2 columns out of non-hierarchal elements,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24481874/