html – 显示多个div的CSS技巧

概述我希望将窗口分成2个相等的部分,相同的高度,但每个的宽度为50％. 所以我用过这个 .container { display: flex; height : 100%; }.column { flex: 1; height : 100%;}.column-one { order: 1;}.column-two { ord 我希望将窗口分成2个相等的部分,相同的高度,但每个的宽度为50％.

所以我用过这个

.container {    display: flex;    height : 100%;       }.column {    flex: 1;    height : 100%;}.column-one {    order: 1;}.column-two {    order: 2;        }

我的HTML结构如下

<div ><div > Column 1    <div   ID="sliceX" ></div>    <div   ID="sliceY"></div>    <div   ID="sliceZ"></div></div><div > Column 2    <div   ID="sliceX2"> </div>    <div   ID="sliceY2"></div>    <div   ID="sliceZ2"></div></div></div>

这很好用.

现在我想要我的.x将占据宽度的100％而高度的50％. .y和.z将在之后显示.两者都占50％的高度(其余).但每个班级只占宽度的50％,因此.y将显示在左侧,而.z显示在右侧

像这样：

Col1 Col2xxxx xxxxxxxx xxxxyyzz yyzzyyzz yyzz

我怎样才能构建我的CSS,让我的实际分离工作在2列？

解决方法 你可以尝试的一件事是让你的.column也成为一个flex容器并设置它的包装以允许包装.然后将.x设置为wIDth：100％;和.y,.z到宽度：50％;然后给他们一个高度：50％;

像这样：

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

见这fiddle.

总结

以上是内存溢出为你收集整理的html – 显示多个div的CSS技巧全部内容，希望文章能够帮你解决html – 显示多个div的CSS技巧所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。