时间戳

首页 > 解决方案 > 如何在较小的屏幕上重新定位一些块？

html - 如何在较小的屏幕上重新定位一些块？

问题描述

我有一个看起来很常见的 html 和 css 布局：一个大的内容行和侧边栏。 在此处输入图像描述

看看这里。块 1、2、3 进入主要部分，4、5、6 块进入侧边栏。现在我想做的是在较小的屏幕上重新定位这些块 - 比如说在平板电脑上。

在此处输入图像描述

所以我只是在犹豫如何将那个蓝色块放在 4 和 5 的底部。到目前为止，我尝试使用 flex 创建它，但它似乎很难，因为结构不允许这样做。

这是代码笔示例

#wrapper {
  display: flex;
  width: 100%;
/*   height: 320px; */
  border: 1px solid black;
}

#col1 {
  flex-basis: 80%;
}

#col2 {
  flex-basis: 20%;
  position: relative
}

#another-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

#wig1 {
  background-color: red;
  height: 80px
}
#wig2 {
  background-color: green;
  height: 150px
}
#wig3 {
  background-color: blue;
  height: 40px
}
#wig4 {
  background-color: yellow;
  height: 100px
}
#wig5 {
  background-color: purple;
  height: 100px
}
#wig6 {
  background-color: magenta;
  display: flex;
  flex-direction: column;
  overflow: auto;
  flex: 1;
}
<div id="wrapper">
  <div id="col1">
    <div id="wig1">1</div>
    <div id="wig2">2</div>
    <div id="wig3">3</div>
  </div>
  <div id="col2">
    <div id="another-wrapper">
      <div id="wig4">4</div>
      <div id="wig5">5</div>
      <div id="wig6">
        <span>6</span>
        <span>6</span>
        <span>6</span>
        <span>6</span>
        <span>6</span>
        <span>6</span>
        <span>6</span>
        <span>6</span>
        <span>6</span>
        <span>6</span>
        <span>6</span>
        <span>6</span>
      </div>
    </div>
  </div>
</div>

标签： htmlcss

解决方案

这是 CSS Grid 的完美工作：

.grid {
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-template-areas: "one two" "three four" "five six";
}

.grid>div {
  border: solid 2px green;
}

.grid>div:nth-child(1) {
  background-color: lightblue;
  grid-area: one;
}

.grid>div:nth-child(2) {
  background-color: yellow;
  grid-area: two;
}

.grid>div:nth-child(3) {
  background-color: lightgreen;
  grid-area: three;
}

.grid>div:nth-child(4) {
  background-color: khaki;
  grid-area: four;
}

.grid>div:nth-child(5) {
  background-color: teal;
  grid-area: five;
}

.grid>div:nth-child(6) {
  background-color: brown;
  grid-area: six;
}

@media screen and (max-width: 500px) {
  .grid {
    grid-template-areas: "one one" "two two" "four six" "five six" "three six";
    grid-template-columns: 1fr 3fr;
  }
}
<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

推荐阅读