Question

我正在使用display：grid和display：flex来创建一种布局，类似于下图中的“普通”布局。我也有一些JavaScript，可让我折叠蓝色和浅蓝色的div。我在设计媒体查询时遇到了很多困难，这将使我将所有div放在图片中的右边。红色的div会扩展到其内容的大小，而蓝色的div则会溢出：scroll。该图像稍微简化了实际情况；实际上，页面中间也有内容。这是我的html的精简版（我知道网格与上图中的网格有点不同）：

<html>
<head>
  <title>Width Test</title>
  <link rel="stylesheet" href="ResponsiveWidth.css">
</head>
<body>
    <div class="left">
      <div class="one"><p>One</p>
        Bacon ipsum dolor amet andouille pork belly shankle bacon landjaeger, cupim flank meatball t-bone capicola leberkas. Tenderloin short loin venison ribeye drumstick, corned beef pork belly pork chop jerky kielbasa salami cupim. Drumstick ham hock filet mignon rump doner. Ham tri-tip venison hamburger rump, jowl ball tip bresaola tenderloin jerky. Chicken cow salami, chuck pancetta tail swine pork loin pork chop turkey beef ribs capicola boudin.

        Meatball flank t-bone pancetta spare ribs landjaeger boudin pork chop leberkas jerky alcatra meatloaf swine ball tip. Pork chop meatball beef ribs ribeye t-bone. Tongue pig flank shoulder alcatra doner ground round kielbasa jerky bresaola beef swine. Tenderloin swine ribeye andouille tongue drumstick fatback.

        Ball tip shankle brisket shoulder salami bresaola leberkas alcatra venison short ribs meatloaf ground round pastrami t-bone flank. Chuck bacon bresaola alcatra t-bone ribeye shank drumstick pork filet mignon ham hock burgdoggen chicken doner. Tenderloin shoulder spare ribs, burgdoggen hamburger sirloin cupim pork loin turkey short loin tail jowl ham hock. Sausage jerky alcatra, ground round cupim chicken short loin turducken bresaola porchetta beef ribs capicola pastrami meatloaf. Rump bacon doner buffalo short loin picanha drumstick cupim.
      </div>
      <div class="two"><p>Two</p>
        Bacon ipsum dolor amet andouille pork belly shankle bacon landjaeger, cupim flank meatball t-bone capicola leberkas. Tenderloin short loin venison ribeye drumstick, corned beef pork belly pork chop jerky kielbasa salami cupim. Drumstick ham hock filet mignon rump doner. Ham tri-tip venison hamburger rump, jowl ball tip bresaola tenderloin jerky. Chicken cow salami, chuck pancetta tail swine pork loin pork chop turkey beef ribs capicola boudin.

        Meatball flank t-bone pancetta spare ribs landjaeger boudin pork chop leberkas jerky alcatra meatloaf swine ball tip. Pork chop meatball beef ribs ribeye t-bone. Tongue pig flank shoulder alcatra doner ground round kielbasa jerky bresaola beef swine. Tenderloin swine ribeye andouille tongue drumstick fatback.

        Ball tip shankle brisket shoulder salami bresaola leberkas alcatra venison short ribs meatloaf ground round pastrami t-bone flank. Chuck bacon bresaola alcatra t-bone ribeye shank drumstick pork filet mignon ham hock burgdoggen chicken doner. Tenderloin shoulder spare ribs, burgdoggen hamburger sirloin cupim pork loin turkey short loin tail jowl ham hock. Sausage jerky alcatra, ground round cupim chicken short loin turducken bresaola porchetta beef ribs capicola pastrami meatloaf. Rump bacon doner buffalo short loin picanha drumstick cupim.
      </div>
    </div>
    <div class="right">
      <div class="three"><p>Three<p>
        Bacon ipsum dolor amet andouille pork belly shankle bacon landjaeger, cupim flank meatball t-bone capicola leberkas. Tenderloin short loin venison ribeye drumstick, corned beef pork belly pork chop jerky kielbasa salami cupim. Drumstick ham hock filet mignon rump doner. Ham tri-tip venison hamburger rump, jowl ball tip bresaola tenderloin jerky. Chicken cow salami, chuck pancetta tail swine pork loin pork chop turkey beef ribs capicola boudin.

        Meatball flank t-bone pancetta spare ribs landjaeger boudin pork chop leberkas jerky alcatra meatloaf swine ball tip. Pork chop meatball beef ribs ribeye t-bone. Tongue pig flank shoulder alcatra doner ground round kielbasa jerky bresaola beef swine. Tenderloin swine ribeye andouille tongue drumstick fatback.

        Ball tip shankle brisket shoulder salami bresaola leberkas alcatra venison short ribs meatloaf ground round pastrami t-bone flank. Chuck bacon bresaola alcatra t-bone ribeye shank drumstick pork filet mignon ham hock burgdoggen chicken doner. Tenderloin shoulder spare ribs, burgdoggen hamburger sirloin cupim pork loin turkey short loin tail jowl ham hock. Sausage jerky alcatra, ground round cupim chicken short loin turducken bresaola porchetta beef ribs capicola pastrami meatloaf. Rump bacon doner buffalo short loin picanha drumstick cupim.
      </div>
    </div>
</body>
</html>

还有我的CSS：

body {
  min-height: 100%;
  display: grid;
  height: 100%;
  margin: 0;
  width: 100%;
  grid-template-columns: repeat(3, 300px);
  grid-template-rows: 600px;
  overflow: hidden;
}


.left, .right {
  grid-row-start: 1;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
}

.left {
  grid-column: 1/2;
}

.right {
  grid-column: 3/4;

}

.one, .two, .three {
  padding: 20px;
  overflow: scroll;
}

.one {
  background-color: red;
}

.two {
  background-color: blue;
}

.three {
  background-color: #00ffff;
}

/* Media Queries */
@media screen and (max-width: 960px) {
  .left {
    grid-column: 3/4;
  }
}

我尝试使用grid-column将div放在同一位置，但是它们只是彼此重叠而不是共享空间。我该怎么办？

Answer 1

我强烈建议您阅读这篇文章，以便为您在CSS网格上打下坚实的基础：

https://css-tricks.com/snippets/css/complete-guide-grid/

关于您的问题：

首先，让我们缩进代码，并在这些浮动文本块中添加一些

标记，以使所有内容更具可读性：）

这样做，要更改元素在网格内的位置，请使用

grid-column-start
grid-column-end
网格行开始
网格行结束

在您的代码中，您有一个3x3的网格，因此，如果您要坚持这一点，我已为您准备了一些示例代码。如果要完全遵守图像示例，则需要更详细地充实网格。

现在，如果您使用3x3网格修复了CSS，则媒体查询应该启动，并且您应该具有以下条件：

css + html是这样的：

body {
min-height: 100%;
display: grid;
height: 100%;
margin: 0;
width: 100%;
grid-template-columns: repeat(3, 300px);
grid-template-rows: repeat(3, 200px);
overflow: hidden;
}


.left, .right {
grid-row: 1/4;
display: flex;
justify-content: space-around;
flex-direction: column;
}

.left {
//grid-column: 1/2;
}

.right {
grid-column: 3/4;

}

.one, .two, .three {
padding: 20px;
overflow: scroll;
}

.one {
background-color: red;
}

.two {
background-color: blue;
}

.three {
background-color: #00ffff;
}

/* Media Queries */
@media screen and (max-width: 960px) {
    
    .left {
        grid-column-start: 3;
        grid-row-start: 1;
        grid-row-end: span 2;
        order: 1;
    }
    .left .one {
        grid-row-start:1;
        grid-row-end:1;
    }
    .left .two {
        grid-row-start:1;
        grid-row-end:2;
    }
    .right {
        grid-column-start:3;
        grid-row-start:3;
        grid-row-end:3;
        order:2;
    }
}

<html>
<head>
<title>Width Test</title>
<link rel="stylesheet" href="ResponsiveWidth.css">
</head>
    
<body>
    <div class="left">
        <div class="one">
            <p>One</p>
            <p>Bacon ipsum dolor amet andouille pork belly shankle bacon landjaeger, cupim flank meatball t-bone capicola leberkas. Tenderloin short loin venison ribeye drumstick, corned beef pork belly pork chop jerky kielbasa salami cupim. Drumstick ham hock filet mignon rump doner. Ham tri-tip venison hamburger rump, jowl ball tip bresaola tenderloin jerky. Chicken cow salami, chuck pancetta tail swine pork loin pork chop turkey beef ribs capicola boudin.</p>

            <p>Meatball flank t-bone pancetta spare ribs landjaeger boudin pork chop leberkas jerky alcatra meatloaf swine ball tip. Pork chop meatball beef ribs ribeye t-bone. Tongue pig flank shoulder alcatra doner ground round kielbasa jerky bresaola beef swine. Tenderloin swine ribeye andouille tongue drumstick fatback.</p>

            <p>Ball tip shankle brisket shoulder salami bresaola leberkas alcatra venison short ribs meatloaf ground round pastrami t-bone flank. Chuck bacon bresaola alcatra t-bone ribeye shank drumstick pork filet mignon ham hock burgdoggen chicken doner. Tenderloin shoulder spare ribs, burgdoggen hamburger sirloin cupim pork loin turkey short loin tail jowl ham hock. Sausage jerky alcatra, ground round cupim chicken short loin turducken bresaola porchetta beef ribs capicola pastrami meatloaf. Rump bacon doner buffalo short loin picanha drumstick cupim.</p>
</div>
        <div class="two"><p>Two</p>
            <p>Bacon ipsum dolor amet andouille pork belly shankle bacon landjaeger, cupim flank meatball t-bone capicola leberkas. Tenderloin short loin venison ribeye drumstick, corned beef pork belly pork chop jerky kielbasa salami cupim. Drumstick ham hock filet mignon rump doner. Ham tri-tip venison hamburger rump, jowl ball tip bresaola tenderloin jerky. Chicken cow salami, chuck pancetta tail swine pork loin pork chop turkey beef ribs capicola boudin.</p>

            <p>Meatball flank t-bone pancetta spare ribs landjaeger boudin pork chop leberkas jerky alcatra meatloaf swine ball tip. Pork chop meatball beef ribs ribeye t-bone. Tongue pig flank shoulder alcatra doner ground round kielbasa jerky bresaola beef swine. Tenderloin swine ribeye andouille tongue drumstick fatback.</p>

            <p>Ball tip shankle brisket shoulder salami bresaola leberkas alcatra venison short ribs meatloaf ground round pastrami t-bone flank. Chuck bacon bresaola alcatra t-bone ribeye shank drumstick pork filet mignon ham hock burgdoggen chicken doner. Tenderloin shoulder spare ribs, burgdoggen hamburger sirloin cupim pork loin turkey short loin tail jowl ham hock. Sausage jerky alcatra, ground round cupim chicken short loin turducken bresaola porchetta beef ribs capicola pastrami meatloaf. Rump bacon doner buffalo short loin picanha drumstick cupim.</p>
</div>
        </div>
    <div class="right">
        <div class="three"><p>Three<p>
            <p>Bacon ipsum dolor amet andouille pork belly shankle bacon landjaeger, cupim flank meatball t-bone capicola leberkas. Tenderloin short loin venison ribeye drumstick, corned beef pork belly pork chop jerky kielbasa salami cupim. Drumstick ham hock filet mignon rump doner. Ham tri-tip venison hamburger rump, jowl ball tip bresaola tenderloin jerky. Chicken cow salami, chuck pancetta tail swine pork loin pork chop turkey beef ribs capicola boudin.</p>

            <p>Meatball flank t-bone pancetta spare ribs landjaeger boudin pork chop leberkas jerky alcatra meatloaf swine ball tip. Pork chop meatball beef ribs ribeye t-bone. Tongue pig flank shoulder alcatra doner ground round kielbasa jerky bresaola beef swine. Tenderloin swine ribeye andouille tongue drumstick fatback.</p>

            <p>Ball tip shankle brisket shoulder salami bresaola leberkas alcatra venison short ribs meatloaf ground round pastrami t-bone flank. Chuck bacon bresaola alcatra t-bone ribeye shank drumstick pork filet mignon ham hock burgdoggen chicken doner. Tenderloin shoulder spare ribs, burgdoggen hamburger sirloin cupim pork loin turkey short loin tail jowl ham hock. Sausage jerky alcatra, ground round cupim chicken short loin turducken bresaola porchetta beef ribs capicola pastrami meatloaf. Rump bacon doner buffalo short loin picanha drumstick cupim.</p>

        </div>
    </div>
    
</body>
</html>

如果仔细观察，您会注意到我注释掉了网格列，因为您没有正确利用它。

我希望这会有所帮助 G

响应性地将右边的三个div堆叠在一起

1 个答案: