Question

在第一张图片中，右栏是应该的，但是在767px（第二张图片）我希望它在左栏下面并且是100％宽。但是，它从顶部开始一直延伸，而不是从技术技能开始。标题。我该如何解决这个问题？

.left-column,
.right-column{
    display: block;
    float: left;
    margin: 1% 0 1% 1.6%;
}
.left-column,
.right-column{
    width: 49.2%;
}
.left-column{
    margin-left: 0;
}
.row {
    zoom: 1; 
}
.row:before,
.row:after {
    content:"";
    display:table;
}
.row:after {
    clear:both;
}

@media only screen and (max-width: 767px){

.left-column,
.right-column{
    width: 100%;
}

.right-column{
    float: none;
}

Answer 1

您只需要重置左栏上的浮动。

@media only screen and (max-width: 767px) {
  .left-column,
  .right-column {
    float: none;
    width: auto; /* rather than 100% to avoid overflow */
  }
}

Answer 2

如果您对flex没有任何反对意见，则可以使用min-width设置一个断点并最终命令设置在最顶层：

.left-column,
.right-column {
  margin: 1%;
  flex: 1;
  min-width: 360.5px;
}
.row {
  display: flex;
  flex-wrap: wrap;
}
.row:before,
.row:after {} .row:after {}
/* demo purpose */

.left-column,
.right-column {
  box-shadow: 0 0 0 1px;
  background: tomato;
}
.left-column {
  background:orange
    }
.row div {
  min-height: 75vh;
}
h1 {
  width: 100%;
}

<div class="row">
  <h1>play me fullpage and resize window :)</h1>
  <div class="left-column">
    left column
  </div>
  <div class="right-column">
    right column
  </div>
</div>

重新订购堆叠：

.left-column,
.right-column {
  margin: 1%;
  flex: 1;
  min-width: 360.5px;
}
.row {
  display: flex;
  flex-wrap: wrap;
  flex-direction:row-reverse
}
.row:before,
.row:after {} .row:after {}
/* demo purpose */

.left-column,
.right-column {
  box-shadow: 0 0 0 1px;
  background: tomato;
}
.left-column {
  background:orange;
  order:1
    }
.row div {
  min-height: 75vh;
}
h1 {
  width: 100%;
}

<div class="row">
  <h1>play me fullpage and resize window :)</h1>
  <div class="left-column">
    left column
  </div>
  <div class="right-column">
    right column
  </div>
</div>

响应式网站布局列

2 个答案: