html – 没有嵌套容器的桌面和移动Flexbox布局

概述我有3个div,必须按照移动布局的特定顺序,但我必须打破第二个div作为桌面布局的侧边栏.所以对于手机： ===== | div1 | ===== | div2 | ===== | div3 | ===== 对于桌面： ===== ===== | div1 | | | ===== | DIV2 | | div3 | | | ===== ===== 在桌面布局中,div 2具有阴影背景,因此必须是父 我有3个div,必须按照移动布局的特定顺序,但我必须打破第二个div作为桌面布局的@R_419_6973@.所以对于手机：

=====
| div1 |
=====
| div2 |
=====
| div3 |
=====

对于桌面：

===== =====
| div1 | | |
===== | div2 |
| div3 | | |
===== =====

在桌面布局中,div 2具有阴影背景,因此必须是父级的完整高度.我可以将div1和div3向左和div2向右浮动并实现我想要的,但是我需要使用javascript来获取div2以填充父级的高度.我想使用flexBox,但只是无法弄清楚如何在不嵌套div1和div3的情况下实现桌面效果,这会打破移动布局.有什么想法吗？

解决方法 根据你在桌面布局中想要nr2的样子,这里有另一种选择,使用伪元素创建它们的幻觉都填充它们的父级.

像这样的伟大做法是不需要固定高度,无论哪个更大,两列都将填充其父级

样品1

.parent {  display: flex;  flex-direction: column;  overflow: hIDden;}.child {  position: relative;  padding: 10px;  border: 2px solID white;  Box-sizing: border-Box;}.nr1 {  background-color: lightblue;  order: -1;}.nr2 {  background-color: lightgreen;}.nr3 {  background-color: lightgray;}@media (max-wIDth: 800px) {  .parent {    display: block;  }  .nr1,.nr3 {    float:left;    wIDth: 50.1%;  }  .nr2 {    float:right;    wIDth: 49.9%;  }  .nr3::after,.nr2::after {    content: '';    position: absolute;    background-color: inherit;    left: 0;    top: 100%;    wIDth: 100%;    height: 100vh;  }}

<div >  <div > 2 </div>  <div > 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> </div>  <div > 3 </div></div>

样本2

.parent {  display: flex;  flex-direction: column;  overflow: hIDden;}.child {  position: relative;  padding: 10px;  border: 2px solID white;  Box-sizing: border-Box;}.nr1 {  background-color: lightblue;  order: -1;}.nr2 {  background-color: lightgreen;}.nr3 {  background-color: lightgray;}@media (max-wIDth: 800px) {  .parent {    display: block;  }  .nr1,.nr2::after {    content: '';    position: absolute;    background-color: inherit;    left: 0;    top: 100%;    wIDth: 100%;    height: 100vh;  }}

<div >  <div > 2 <br> 2 <br> 2 <br> 2 <br> 2 <br> 2 <br> </div>  <div > 1 </div>  <div > 3 </div></div>

样本3

.parent {  display: flex;  flex-direction: column;  overflow: hIDden;}.child {  position: relative;  padding: 10px;  border: 2px solID white;  Box-sizing: border-Box;}.nr1 {  background-color: lightblue;  order: -1;}.nr2 {  background-color: lightgreen;}.nr3 {  background-color: lightgray;}@media (max-wIDth: 800px) {  .parent {    display: block;  }  .nr1,.nr2::after {    content: '';    position: absolute;    background-color: inherit;    left: 0;    top: 100%;    wIDth: 100%;    height: 100vh;  }}

<div >  <div > 2 </div>  <div > 1 </div>  <div > 3 <br> 3 <br> 3 <br> 3 <br> 3 <br> 3 <br> </div></div>

这个在父级上使用伪,使nr2看起来很好,具有渐变背景

.parent {  position: relative;  display: flex;  flex-direction: column;  overflow: hIDden;}.child {  position: relative;  padding: 10px;  border: 2px solID white;  Box-sizing: border-Box;}.nr1 {  background-color: lightblue;  order: -1;}.nr2 {  background-color: lightgreen;}.nr3 {  background-color: lightgray;}@media (max-wIDth: 800px) {  .parent {    display: block;  }  .parent::before {    content: '';    position: absolute;    background: linear-gradIEnt(lightgreen,green);    left: 50.1%;    top: 2px;    wIDth: 49.9%;    height: 100%;  }    .nr1,.nr3 {    float:left;    wIDth: 50.1%;  }  .nr2 {    float:right;    wIDth: 49.9%;    border: none;    background-color: transparent;  }  .nr3::after {    content: '';    position: absolute;    background-color: inherit;    left: 0;    top: 100%;    wIDth: 100%;    height: 100vh;  }}

<div >  <div > 2 <br> 2 <br> 2 <br> 2 <br> 2 <br> 2 <br> </div>  <div > 1 <br> 1 <br> 1 <br> </div>  <div > 3 <br> 3 <br> 3 <br> 3 <br> 3 <br> 3 <br> </div></div>

总结

以上是内存溢出为你收集整理的html – 没有嵌套容器的桌面和移动Flexbox布局全部内容，希望文章能够帮你解决html – 没有嵌套容器的桌面和移动Flexbox布局所遇到的程序开发问题。

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