CSS技巧来显示多个div

我想分开我的窗口在2个相同的部分，相同的高度，但宽度为50％为每个。CSS技巧来显示多个div

所以我用这个

.container { 
    display: flex; 
    height : 100%;  
} 

.column { 
    flex: 1; 
    height : 100%; 
} 

.column-one { 
    order: 1; 

} 
.column-two { 
    order: 2;   
}

我的HTML的结构是这样

<div class="container"> 

<div class="column column-one"> Column 1 
    <div class="x" id="sliceX" ></div> 
    <div class="y" id="sliceY"></div> 
    <div class="z" id="sliceZ"></div> 
</div> 

<div class="column column-two"> Column 2 
    <div class="x" id="sliceX2"> </div> 
    <div class="y" id="sliceY2"></div> 
    <div class="z" id="sliceZ2"></div> 
</div> 

</div>

这是运作良好。

现在我想我的.x将占宽度的100％，但高度的50％。将在后面显示.y和.z。两者都取高度的50％（其余）。但每个班只需要宽度，以便.y将显示在左边，.z右侧

像这样50％：

Col1 Col2 
xxxx xxxx 
xxxx xxxx 
yyzz yyzz 
yyzz yyzz

我怎样组织我的CSS得到这个工作与我的实际分离在2列？

来源

2016-03-03 Raccoon

你的意思是高度时，你说长一个伟大的工具 -

上使用Flex，顺便说一句伟大的工作？ – Pit

@ pit是的，对不起。我编辑了我的帖子 – Raccoon

你可以尝试的一件事是让你的.column一个柔性容器也设置它的包装允许包装。然后设置.x到width:100%;和.y, .z到width:50%;然后给他们全部height:50%;

像这样：

.column { 
    flex: 1; 
    height : 100%; 
    display:flex; 
    flex-wrap:wrap; 
} 
.x{ 
    width:100%; 
    height:50%; 
} 
.y, .z{ 
    width:50%; 
    height:50%; 
}

看到这个fiddle。

来源

2016-03-03 15:54:54 zgood

很好的答案。添加边界可视化它有点帮助：https://jsfiddle.net/mypa0z71/ –

@JosephMarikle是的，它确实！我会更新我的答案来使用你的小提琴 – zgood

您可能会得到最好的结果，第二个flex的定义。您可以使用flex-wrap相当有效地包装布局。是这样的：

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
.container { 
 
    display: flex; 
 
    height: 100%; 
 
    align-items: stretch; 
 
} 
 
.column { 
 
    flex: 0 0 50%; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    align-items: stretch; 
 
} 
 
.x { 
 
    flex: 0 0 100%; 
 
} 
 
.y, .z { 
 
    flex: 0 0 50%; 
 
} 
 
.x {background-color: #ff8080} 
 
.y {background-color: #80ff80} 
 
.z {background-color: #8080ff}

<div class="container"> 
 
    <div class="column column-one"> 
 
    <div class="x" id="sliceX"></div> 
 
    <div class="y" id="sliceY"></div> 
 
    <div class="z" id="sliceZ"></div> 
 
    </div> 
 

 
    <div class="column column-two"> 
 
    <div class="x" id="sliceX2"></div> 
 
    <div class="y" id="sliceY2"></div> 
 
    <div class="z" id="sliceZ2"></div> 
 
    </div> 
 
</div>

在上述中，.x取宽度的100％，推.y和.z到第二行。其中每个都需要50％的宽度，这是一个不错的结果。你当然可以进一步调整平衡到30/70或任何你选择的。它绝对适合这个工作:)

来源

2016-03-03 15:56:11

CSS技巧来显示多个div

回答

相关问题