我正在尝试构建一个具有两个独立内容组的布局:一个位于左侧和右侧,目前具有固定宽度(20%/80%)。在每一侧,我都尝试使用 flexbox: left panel 来排列内容flex-direction: column
和右侧面板flex-direction: row wrap
。每面的内容数量可以灵活调整。内容较少的面板应与另一“较高”一侧的高度相匹配。
到目前为止,我已经能够实现基本布局,如下所示jsfiddle https://jsfiddle.net/31v8jzu5/。然而,我的问题是,即使我将高度设置为 100%,我也无法使“较短”面板填充高度。在给定的示例中,左侧面板的“C”div 和右侧面板的“Box7”div 之间有一个空白区域。 html/css 代码如下所示。
我该如何解决这个问题或者是否有更好更简单的布局解决方案?任何帮助,将不胜感激。
HTML
<div class='top'>
<div class='left'>
<div class='litem'>A</div>
<div class='litem'>B</div>
<div class='litem'>C</div>
</div>
<div class='right'>
<div class='ritem'>Box 1</div>
<div class='ritem'>Box 2</div>
<div class='ritem'>Box 3</div>
<div class='ritem'>Box 4</div>
<div class='ritem'>Box 5</div>
<div class='ritem'>Box 6</div>
<div class='ritem'>Box 7</div>
</div>
</div>
CSS
* { outline: 1px solid Grey; }
html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-color: Cornsilk;
}
.top {
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
}
.left {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
width: 20%;
height: 100%;
}
.right {
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 80%;
height: 100%;
}
.litem, .ritem {
margin: 0;
padding: 0;
}
.litem { height: 50%; }
.ritem { height: 50%; width: 33.3%;}
.litem:nth-child(1) { background-color: Cyan; }
.litem:nth-child(2) { background-color: DarkCyan; }
.litem:nth-child(3) { background-color: DarkSeaGreen; }
当您申请时height: 100%
to html
and body
,您将子元素的增长限制为屏幕的 100%。
在你的代码中,你的.left
弹性项目确实拉伸到height: 100%
, 作为指定。在周围添加边框.left
举例说明:DEMO https://jsfiddle.net/31v8jzu5/2/
如果删除所有固定高度,您将启用 Flex 容器以按照默认设置拉伸所有 Flex 项目:align-items: stretch
(创建等高列的设置)。DEMO https://jsfiddle.net/31v8jzu5/3/
当你添加flex: 1
to the .left
弹性项目(.litem
),然后它们将容器中的所有可用空间均匀地分配给它们自己。DEMO https://jsfiddle.net/31v8jzu5/5/.
简而言之,当您使用height
财产你override align-items: stretch
,等高列的 Flex 设置。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)