[英]Flex CSS with fixed width and equal height
I have three sections in a container. 我在一个容器中有三个部分。 When I resize my browser to the
max-width
of 668px
, I need to make the section 1 and section 3 in one row and the section 2 in the below row. 当我将浏览器的大小调整为
max-width
668px
,我需要将第1部分和第3部分放在一行中,而在第二行中则放在第2部分中。 The section 2 width should be proportional to the section 1 and section 3 width. 第2节的宽度应与第1节和第3节的宽度成比例。
But now once I minimize the browser size to 668px
and below, then section 3 is not visible. 但是现在,一旦我将浏览器的大小最小化到
668px
及以下,则第3部分将不可见。
This is what I tried. 这就是我尝试过的。
@media (max-width: 668px) { .container { display: flex; flex-wrap: wrap; justify-content: center; align-self: flex-start; } .container .section1 { height: 300px; } .container .section1, .container .section3 { flex: 0 0 262px; margin: 3px; display: block; flex-grow: 0; flex-shrink: 0; } .container .section2 { flex: 0 0 500px; flex-grow: 0; flex-shrink: 0; order: 1; min-height: 235px; } } @media (max-width: 940px) { .container { display: flex; flex-wrap: wrap; justify-content: center; align-self: flex-start; } .container .section1 { height: 300px; } .container .section1, .container .section3 { flex: 0 0 262px; margin: 3px; display: block; flex-grow: 0; flex-shrink: 0; } .container .section2 { flex: 0 0 500px; flex-grow: 0; flex-shrink: 0; order: 1; min-height: 235px; } }
<div class="container"> <div class="section1">Section 1</div> <div class="section2">Section 2</div> <div class="section3">Section 3</div> </div>
You don't have any height specified on .section3
. 您在
.section3
上没有指定任何高度。
On .section1
you have height: 300px
. 在
.section1
您的height: 300px
。
On .section2
you have min-height: 235px
. 在
.section2
您的min-height: 235px
。
But on .section3
you have nothing. 但是在
.section3
您什么都没有。 Try this adjustment to your code: 尝试对您的代码进行此调整:
.section1, .section3 {
height: 300px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.