css 按列列出的响应部分

gmol1639 于 2023-02-14 发布在其他

关注(0)|答案(3)|浏览(125)

我正试着做一个有React的部分。
这是我希望它在桌面中的样子：

+---+---+---+--------------+
| 3 | 2 | 1 |       A      |    <- this is right one
+---+---+---+--------------+

这是它在移动的视图中的外观：

+-----------+
|     A     |
+---+---+---+   <- this is right one
| 3 | 2 | 1 |
+---+---+---+

我也尝试过一些教程，但每次都是这样：

+-----------+
|     A     |
+-----------+
|     1     |
+-----------+   <- this is wrong one
|     2     |
+-----------+
|     3     |
+-----------+

希望形象化能有所帮助。
我试着做一个有两栏的部分。第一栏有字母在里面。第二栏有一个有三栏的内部部分，每一栏有一个数字在里面。

css

来源：https://stackoverflow.com/questions/75409633/responsive-section-by-columns

3条答案

按热度按时间

cbjzeqam1#

可以用网格来完成。
一种方法是制作嵌套网格，但如果您精确地指定起点和终点位置，则会更简单。

body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
}

#grid {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 16.6% 16.6% 16.6% 1fr;
  gap: 0;
  width: 100%;
  height: 100%;
}

#div1 {
  grid-area: 1 / 3 / 2 / 4;
  background-color: rgba(29, 145, 229, 0.5);
}

#div2 {
  grid-area: 1 / 2 / 2 / 3;
  background-color: rgba(1, 16, 21, 0.5);
}

#div3 {
  grid-area: 1 / 1 / 2 / 2;
  background-color: rgba(66, 202, 43, 0.5);
}

#A {
  grid-area: 1 / 4 / 2 / 5;
  background-color: rgba(53, 69, 26, 0.5);
}

@media screen and (max-width: 768px) {
  #grid {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    width: 100%;
    height: 100%;
  }
  #div3 {
    grid-area: 2 / 1 / 3 / 2;
    background-color: rgba(143, 196, 214, 0.5);
  }
  #div2 {
    grid-area: 2 / 2 / 3 / 3;
    background-color: rgba(126, 56, 58, 0.5);
  }
  #A {
    grid-area: 1 / 1 / 2 / 4;
    background-color: rgba(158, 192, 23, 0.5);
  }
  #div1 {
    grid-area: 2 / 3 / 3 / 4;
    background-color: rgba(9, 129, 51, 0.5);
  }
}

<div id="grid">
  <div id="div1">1</div>
  <div id="div2">2</div>
  <div id="div3">3</div>
  <div id="A">A</div>
</div>

赞(0）回复(0）举报 2023-02-14

7ivaypg92#

给你：
超文本：

<div class="parent">
    <div>3</div>
    <div>2</div>
    <div>1</div>
    <div>A</div>
</div>

CSS：

.parent {
        display: flex;
        text-align: center;
    }

    .parent>div {
        flex: 1;
        border: 1px dotted black;
        padding: 30px 0;
    }

    .parent>div:last-child {
        flex: 5;
    }

您可以根据需要更改介质查询。

@media only screen and (max-width:767px) {
        .parent {
            flex-wrap: wrap;
        }

        .parent>div:last-child {
            flex-basis: 100%;
            order: -1;
        }

    }

赞(0）回复(0）举报 2023-02-14

esyap4oy3#

使用媒体屏幕和Flexbox
HTML代码

<div class="container">
  <div class="A">A</div>
  <div class="3">1</div>
  <div class="2">2</div>
  <div class="1">3</div>
</div>

CSS代码

*{
  box-sizing: border-box;
  margin: 0;
}
.container {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  width: 100%;
  height: 100vh;
}

.container div {
  width: calc(100% / 3);
  padding: 20px;
  height: 100%;
  border: 1px dotted;
}
.container .A {
width: 100%;
text-align: center;
}
@media (max-width:767px) {
  .container {
    flex-wrap: wrap;
  height: 50vh;
  }
}

赞(0）回复(0）举报 2023-02-14

我来回答

css 按列列出的响应部分

3条答案

相关问题

热门标签

最新问答