html / css响应式3列布局 - 左下方的堆栈右列 [英] html/css responsive 3-column layout - stack right column below left column

问题描述

我试图让3列布局的右列移动到较小屏幕上的左列下方。现在，右侧的列按照正确的方向移动，除了悬挂在中间列之下。

我创建了这个我的问题的基本模拟。请注意，中间的列将总是比左侧和右侧的列更长，如下所示：

 < style> 
 .container {
 max-width：1280px; 
宽度：100％; 
 height：200px; 
 margin-left：auto; 
 margin-right：auto; 
 display：flex; 
 flex-wrap：wrap; 
} 
 
 .leftsidebar {
 width：20％; 
 height：200px; 
 background-color：gray; 
 margin-top：15px; 
} 
 
 .middle {
 width：57％; 
 background-color：blue; 
 margin-left：15px; 
 margin-right：15px; 
 height：800px; 
 margin-top：15px; 
} 
 
 .rightsidebar {
 width：20％; 
 background-color：orange; 
 height：200px; 
 margin-top：15px; 
} 
< / style> 
 
< div class =container> 
< div class =leftsidebar> left< / div> 
< div class =middle>中< / div> 
< div class =rightsidebar>正确< / div> 
< / div> 
  

解决方案

固定高度全部结束。

这是一个将Flexbox与 float 结合的解决方案，并使用媒体查询进行交换当使用基于百分比的宽度与固定边距相结合时，它可以在某个时间点导致项目打包。使用CSS Calc来避免这种情况，正如答案中所显示的那样。

Stack snippet

  .container {max-width：1280px; height：200px;保证金：0汽车;显示：flex;}。左边栏，右边栏{宽度：20％;背景颜色：灰色; margin-top：15px;}。rightsidebar {background-color：orange; clear：left;}。middle {width：calc（60％ -  30px）; / *保证金计算* / background-color：blue; margin：15px 15px 0 15px; height：800px;} @ media（max-width：600px）{.container {display：block; } .leftsidebar，.rightsidebar {height：200px;向左飘浮; } .middle {width：calc（80％ -  30px）; / *保证金计算* /浮动：正确; }  

< div class =container> < div class =leftsidebar> left< / div> < div class =middle>中< / div> < div class =rightidebar> right< / div>< / div>

b

I'm trying to get the right column of a 3 column layout to move below the left column on smaller screens. Right now the right column moves in the correct direction except that it hangs below the middle column.

I created this basic simulation of my issue. Note the middle column will always be longer than the left and right columns as shown here.

<style>
  .container {
    max-width:1280px;
    width:100%;
    height:200px;
    margin-left:auto;
    margin-right:auto;
    display:flex;
    flex-wrap: wrap;
  }

  .leftsidebar {
    width:20%;
    height:200px;
    background-color:gray;
    margin-top:15px;
  }

 .middle {
    width:57%;
    background-color:blue;
    margin-left:15px;
    margin-right:15px;
    height:800px;
    margin-top:15px;
  }

 .rightsidebar {
    width:20%;
    background-color:orange;
    height:200px;
    margin-top:15px;
  }
</style>

<div class="container">
  <div class="leftsidebar">left</div>
  <div class="middle">middle</div>
  <div class="rightsidebar">right</div>
</div>

解决方案

You can't accomplish that with Flexbox, unless setting fixed height's all over.

Here is a solution that combine Flexbox with float, and use a media query to swap between the two, when on narrower screens.

Note, when using percent based width combined with fixed margins, it can at some point cause the item to wrap. Use CSS Calc to avoid that, as showed in the answer.

Stack snippet

.container {
  max-width: 1280px;
  height: 200px;
  margin: 0 auto;
  display: flex;
}

.leftsidebar, .rightsidebar {
  width: 20%;
  background-color: gray;
  margin-top: 15px;
}
.rightsidebar {
  background-color: orange;
  clear: left;
}

.middle {
  width: calc(60% - 30px);          /*  calc for margin  */
  background-color: blue;
  margin: 15px 15px 0 15px;
  height: 800px;
}

@media (max-width: 600px) {
  .container {
    display: block;
  }
  .leftsidebar, .rightsidebar {
    height: 200px;
    float: left;
  }
  .middle {
    width: calc(80% - 30px);          /*  calc for margin  */
    float: right;
  }
}

<div class="container">
  <div class="leftsidebar">left </div>
  <div class="middle">middle </div>
  <div class="rightsidebar">right </div>
</div>

这篇关于html / css响应式3列布局 - 左下方的堆栈右列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！