我希望将窗口分成2个相等的部分,相同的高度,但每个的宽度为50%.
所以我用过这个
.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%的高度(其余).但每个班级只占宽度的50%,因此.y将显示在左侧,而.z显示在右侧
像这样:
Col1 Col2 xxxx xxxx xxxx xxxx yyzz yyzz yyzz 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.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。