我正在尝试为不同的调整大小创建布局。我需要在此处获得这些图像中的结果:
我有这个代码:
.container {
position: relative;
display: flex;
align-items: stretch;
}
.item {
background-color: black;
box-sizing: border-box;
padding: 20px;
flex: 2;
color: #fff;
}
.item:nth-child(2) {
background-color: grey;
flex: 1
}
.item:nth-child(3) {
background-color: green;
flex: 0.5;
}
@media screen and (max-width: 990px) {
.container {
height: auto;
display: table;
}
.item:nth-child(2) {
float: left;
}
.item:nth-child(3) {
float: right;
}
}
<section class="container">
<div class="item">
<h2>title1</h2>
<hr>You'll notice that even though this column has far more content in it, instead of the other columns ending early, they size themselves to meet the end of this column vertically.</div>
<div class="item">
<h2>title2</h2>
<hr>Normally, the only way to achieve this would be either a hack, or to set all boxes to min-height.
</div>
<div class="item">
<h2>title3</h2>
<hr>This is a column with not much content.
</div>
</section>
这里有一个codepen https://codepen.io/darudev/pen/pyBrzL
问题出在 990 像素调整大小 View 中,我找不到创建与“模型”相同 View 的解决方案。
有没有人可以帮助我或给我一些建议?
谢谢。
最佳答案
您的代码中不需要 table 和 float 属性。
@media screen and (max-width: 990px) {
.container {
height: auto;
display: table;
}
.item:nth-child(2) {
float: left;
}
.item:nth-child(3) {
float: right;
}
}
整个布局都可以用flexbox做。
解决方案如下:当屏幕调整到小于 990 像素时,允许 flex 元素换行并为第一个元素提供 100% 宽度,这会强制后续元素到下一行。
.container {
display: flex;
}
.item {
background-color: black;
box-sizing: border-box;
padding: 20px;
flex: 2;
color: #fff;
}
.item:nth-child(2) {
background-color: grey;
flex: 1;
}
.item:nth-child(3) {
background-color: green;
flex: 0.5;
}
@media screen and (max-width:990px) {
.container { flex-wrap: wrap; }
.item:first-child { flex-basis: 100%; }
}
<section class="container">
<div class="item">
<h2>title1</h2>
<hr>You'll notice that even though this column has far more content in it,
instead of the other columns ending early, they size themselves to meet the end
of this column vertically.</div>
<div class="item">
<h2>title2</h2>
<hr>Normally, the only way to achieve this would be either a hack, or to set
all boxes to min-height.</div>
<div class="item">
<h2>title3</h2>
<hr>This is a column with not much content.
</div>
</section>
关于html - 如何将元素包装在 flexbox 中以适应较小的屏幕?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37218224/