显示：内容；

Question

下图显示了我当前的布局，其中容器1和3的高度由中间列确定。在我的移动视图中，我希望这些容器彼此堆叠，即1,2,3,4。但是，按照我目前的方法，我有1,2,4,3

<div class="wrapper">
    <div class="aside aside-1">
        <h2>container 1</h2>    
    </div>
    <div class="main">
        <div class="inner-content first">
            <h2>container 2</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id fermentum erat, cursus viverra risus. Cras sodales risus justo, in pretium eros pretium ut.</p>
        </div>
        <div class="inner-content last">
            <h2>container 4</h2>
        </div>
    </div>
    <div class="aside aside-2">
        <h2>container 3</h2>
    </div>
</div>


.wrapper {
    display: flex;  
    flex-flow: row wrap;
}

.wrapper > * {
    flex: 1 100%;
    margin: 20px 0;
}

.main {
    margin-right: 20px;
    margin-left: 20px;
    .inner-content {
        background: yellow;
        padding: 10px;
        &.first {
            margin-bottom: 20px;
        }
    }
}


.aside-1, .aside-2  {
    background: yellow;
    padding: 10px;
}

@media all and (min-width: 600px) {
    .aside { flex: 1 0 0; }
}

@media all and (min-width: 800px) {
    .main    { flex: 1 0px; }
    .aside-1 { order: 1; } 
    .main    { order: 2; }
    .aside-2 { order: 3; }
    .footer  { order: 4; }
}

这里是demonstrate问题的链接

Answer 1

显示：内容；

使用您的实际标记，建议之一是在display: contents; div上使用.main。

这些元素本身不会产生特定的框。它们由伪框和子框代替。请注意，CSS Display Level 3规范定义了内容值应如何影响“异常元素”，这些元素不是纯粹由CSS框概念呈现的，例如被替换的元素。

Source: MDN。

两个警告：

它可能会从辅助功能树中删除内容
IE不支持

摘要如下：

.wrapper {
    display: flex;  
    flex-flow: row wrap;
  }
  
  .wrapper > * {
    flex: 1 100%;
    margin: 20px 0;
  }

.main {
  margin-right: 20px;
  margin-left: 20px;
  display: contents;

  .inner-content {
    background: yellow;
    padding: 10px;

    &.first {
      margin-bottom: 20px;
    }
  }
}


.aside-1,
.aside-2 {
  background: yellow;
  padding: 10px;
}

.last {
  order: 2;
}

.aside-2, .last {
  width: 100%;
 margin: 20px 0;
}

@media all and (min-width: 600px) {
  .aside {
    flex: 1 0 0;
  }
}

@media all and (min-width: 800px) {
  .main {
    flex: 1 0px;
    display: block;
  }

  .aside-1 {
    order: 1;
  }

  .main {
    order: 2;
  }

  .aside-2 {
    order: 3;
  }

  .last {
    width: auto;
  }
}

<div class="wrapper">
  <div class="aside aside-1">
    <h2>container 1</h2>    
  </div>
  <div class="main">
    <div class="inner-content first">
      <h2>container 2</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id fermentum erat, cursus viverra risus. Cras sodales risus justo, in pretium eros pretium ut.</p>
    </div>
    <div class="inner-content last">
      <h2>container 4</h2>
    </div>
  </div>
  <div class="aside aside-2">
    <h2>container 3</h2>
  </div>
</div>

支持：

Table of support on Can I Use

css网格

通过更改您的实际标记并使用网格，您可以找到一个更简单的解决方案。

有很多方法可以做到这一点，我会根据页面内容的重要性来调整HTML markup。

一种解决方案是为儿童提供如下包装：内容1，内容2，内容3，内容4。
在移动设备上，您可以保留初始的盒子模型display: block;并仅在媒体查询中进行调整。

摘要如下：

.wrapper > div {
  background: yellow;
  padding: 10px;
  margin-bottom: 20px;
}

@media all and (min-width: 800px) {
  .wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 20px 20px;
    grid-template-areas:
      "aside-1 first aside-2"
      "aside-1 last aside-2";
  }  
  
  .aside-2 { grid-area: aside-2; }
  .aside-1 { grid-area: aside-1; }
  .first { grid-area: first; }
  .last { grid-area: last; }  

  .wrapper > div {
    margin-bottom: 0;
  }
}

<div class="wrapper">
  <div class="aside-1">
    <h2>container 1</h2>    
  </div>
  <div class="first">
    <h2>container 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id fermentum erat, cursus viverra risus. Cras sodales risus justo, in pretium eros pretium ut.</p>
  </div>
  <div class="aside-2">
    <h2>container 3</h2>
  </div>
  <div class="last">
    <h2>container 4</h2>
  </div>  
</div>

标记和样式比您的初始代码更简单：减少div和规则。

Table of support on Can I Use

使用网格时，请不要忘记为规则添加前缀。

更改移动设备和台式机布局的列顺序

1 个答案:

显示：内容；

css网格