Question

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

我创建了这个问题的基本模拟。请注意，中间列将始终比左侧和右侧列长，如此处所示。

<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>

Answer 1

除非设置固定高度，否则无法使用Flexbox实现这一目标。

这是一个将Flexbox与float结合使用的解决方案，并且在较窄的屏幕上使用媒体查询在两者之间进行切换。

请注意，当使用基于百分比的宽度和固定边距时，它可以在某些时候导致项目换行。使用CSS Calc来避免这种情况，如答案中所示。

Stack snippet

＆＃13;

.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;
  }
}

＆＃13;

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

＆＃13;

Answer 2

我只能拿出旧的漂浮物，根本没有灵活的盒子。如果您不必使用flexbox并且您感兴趣，那么非常轻微的喧嚣可能看起来像这样（快照点是700px）：

* {
     box-sizing: border-box;
}
.container {
    width:90%; 
    height:200px; 
    margin:0px auto;
}
div > div {
  background-color: orange;
  float: left;
  color: white;
  text-align: center;
  padding: 1em;
}
.leftsidebar {
    width: 20%; 
    height: 200px;  
    margin-top: 15px;
}
.middle{
    width:56%;  
    margin: 15px 2% 0%;  
    height:415px; 
}
.rightsidebar {
    width: 20%; 
    height: 200px; 
    margin-top: 15px;
}
@media (max-width: 700px) {
    div > div:nth-of-type(2n + 1) {
        width: 33%;
    }  
    div > div:nth-of-type(2n) {  
       float: right;
       width: 65%; 
       margin-right: 0%;
    } 
}

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

html / css响应式3列布局 - 在左列下方堆叠右列

2 个答案: