Question

我遇到一种情况，我猜你会称呼主要区域和侧边区域（不是具有无关内容的普通边栏），例如：

这是在桌面上显示的方式，但是在移动设备上，如果它们通过图像中显示的数字重要性显示，那将是理想的选择。

但是在移动设备上，我们显然以1,4,2,3结尾。

我使用flex没问题，但是在这种情况下，我认为这没有帮助。

1,4位于一列中，而2,3位于另一列中；我知道我可以将1和2放在他们自己的行中，然后它们自然会在移动设备上相互掉落，但是如果我这样做，那么显然3会由于1的高度而在其上面留有很大的空白。

代码笔： https://codepen.io/gutterboy/pen/NepJbX

HTML：

<div class="container">
  <div class="row">
    <div class="content col-sm-8">
      <div class="primary part"><span>1</span></div>
      <div class="secondary part"><span>4</span></div>
    </div>
    <div class="sidebar col-sm-4">
      <div class="side1 part"><span>2</span></div>
      <div class="side2 part"><span>3</span></div>
    </div>
  </div>
</div>

CSS：

.container {
  margin-top: 20px;
}

.row {
  border: 4px solid #000;
}

.part {
  position: relative;
  background-color: gray;
  font-size: 60px;
  font-weight: bold;

  &:first-child {
    border-bottom: 2px solid #fff;
  }

  span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

}

.content {

  .primary {
    height: 300px;
  }

  .secondary {
    height: 100px;
  }

}

.sidebar {

  .side1, .side2 {
    height: 200px;
  }

}

编辑：

我尝试flex整个过程，当 1 长于 2,3 组合时，效果很好：

https://codepen.io/gutterboy/pen/ebvXaO

但是，如果 1 比更短，则会成为问题，因为 4 不会在 1之后立即开始内容。

https://codepen.io/gutterboy/pen/jXBJRd

有什么办法可以做我想在这里实现的目标吗？

Answer 1

只需更改区域定义，就可以使用网格（如Vxp所述）实现一种优雅的解决方案。

在代码段中，选中复选框以激活样式。但这可以通过媒体查询或您想要的其他任何方式设置

.container {
    display: grid;
    grid-template-areas: "a1 a23"
                         "a4 a23";
}
input:checked +  .container {
    grid-template-areas: "a1" 
                         "a23" 
                         "a4";
}
.primary {
    grid-area: a1;
}
.side {
    grid-area: a23;
    border: solid 1px blue;
}

.secondary {
    grid-area: a4;
}
.part {
    border: solid 1px red;
    margin: 10px;
}

<input type="checkbox" />
<div class="container">
  <div class="primary part">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ego in hoc resisto; Non enim, si omnia non sequebatur, idcirco non erat ortus illinc. 
  </div>
  <div class="secondary part"><span>4</span></div>
  <div class="side">
    <div class="side1 part"><span>-----------2--------------</span></div>
    <div class="side2 part"><span>3</span></div>
  </div>
</div>

Answer 2

您可能会发现一些棘手的CSS，重新设计，使用可见性类或使用JavaScript在页面中移动内容。

我总是尽量避免对布局技巧太“可爱”。
重新设计，以实现流动流畅的移动式第一响应设计，该设计不需要太多重新布置即可带来技术负担。
使用一些可见性类-它们不会将您的页面视为关于SEO的重复内容，但是页面大小大于所需的大小
保留当前开始，并添加一些js来移动元素。这可能很难进行布线和样式设置，并且您需要正确地反跳，以避免回流时出现跳动的伪影，并且这也更加难以维护。

在这种情况下，我将查看选项＃3，可见性类。只需将块1和2的副本添加到主区域中，并通过媒体查询将其隐藏。

https://codepen.io/Jason_B/pen/VqpRgp

&.mobile-only {
  @media only screen and (min-width: 576px ) {
    display: none; 
  }
}

Answer 3

您可以混合使用网格查询和媒体查询。

使用网格，您可以执行以下操作

body{
    display: grid;
    grid-template-areas: "one two"
                         "four three";
    font-size: 3em;
}

.one{
    grid-area: one;
    background-color: yellow;
}

.two{
    grid-area: two;
    background-color:green;
}

.three{
    grid-area: three;
    background-color: red;
}

.four{
    background-color: aqua;
}

    <div class="one">
        1
    </div>
    
    <div class="two">
        2
    </div>
    
    <div class="three">
        3
    </div>

    <div class="four">
        4
    </div>

在移动设备的一般流程之外重新定位元素

3 个答案: