我有 3 个 div，它们必须按移动布局的特定顺序排列，但我必须将第 2 个 div 作为桌面布局的侧边栏。所以对于移动设备：
=====
|分区1 |
=====
|分区2 |
=====
|分区3 |
=====
对于桌面：
===== =====
|分区1 | | |
===== | div2 |
|分区3 | | |
===== =====
在桌面布局中，div 2 有阴影背景，因此必须是父级的完整高度。我可以向左浮动 div1 和 div3，向右浮动 div2 并实现我想要的效果，但随后我需要使用 javascript 来让 div2 填充父级的高度。我想使用flexbox，但不知道如何在不嵌套div1和div3的情况下实现桌面效果，这会破坏移动布局。有什么想法吗？
根据你想要的方式nr2为了看起来像在桌面布局中，这里有另一个选项，使用伪元素来创建illusion他们都填充了他们的父母。
这样的伟大之处在于不需要固定的高度，而且columns都会填充它的父级，无论哪个更大
Sample 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 class="parent">
<div class="child nr2"> 2 </div>
<div class="child nr1"> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> </div>
<div class="child nr3"> 3 </div>
</div>
Sample 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, .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 class="parent">
<div class="child nr2"> 2 <br> 2 <br> 2 <br> 2 <br> 2 <br> 2 <br> </div>
<div class="child nr1"> 1 </div>
<div class="child nr3"> 3 </div>
</div>
Sample 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, .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 class="parent">
<div class="child nr2"> 2 </div>
<div class="child nr1"> 1 </div>
<div class="child nr3"> 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 class="parent">
<div class="child nr2"> 2 <br> 2 <br> 2 <br> 2 <br> 2 <br> 2 <br> </div>
<div class="child nr1"> 1 <br> 1 <br> 1 <br> </div>
<div class="child nr3"> 3 <br> 3 <br> 3 <br> 3 <br> 3 <br> 3 <br> </div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
