CSS响应迅速布局帮助：DIV不在同一条线上

Question

我开始教自己如何编码和进行作业创建一个响应网站，但无法使用Twitter Bootstrap或任何新的网格属性等框架。问题是我试图使3个Divs以992px的最小宽度和最小宽度为768px的设备，最大宽度为991px，我正在尝试在两者中获得两个，最高宽度为991px的设备。一个在底部。有了我当前的代码，我可以在顶部获得3个，但是当我去平板电脑设备时，我垂直铺设了所有3个，并占据了50％的屏幕。

我尝试调整宽度属性，删除填充和边距，并与“容器”，边框框，卸下和添加浮点属性的类别添加一个总体div。

这是我当前的CSS代码和预期的图像。

*{
    box-sizing: border-box;
  }

body {
    background-color: white;
    margin: 0px;
}
h1 {
    color: black;
    text-align: center;
}

.container {
    width: 100%;
}

section {
    background-color: gray;
    border: 1px solid black;
    margin: 5px;
}
p#description {
    /*text-align: left;*/
    /*font-weight:100;*/
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    /*padding-bottom: 0px;*/
    height: 250px;
}
p#suboptions {
    float: right;
    border-left: 1px solid black;
    border-bottom: 1px solid black;
}
p.chick {
    background-color: lightpink;
    color:black;
    text-align: center;
    font-size: large;
    font-weight: bold;
    font-family: 'Times New Roman', Times, serif;
    width: 25%;
    margin-top: 0px;
    padding: 5px;
}
p.beef {
    background-color:maroon;
    color: white;
    text-align: center;
    font-size: large;
    font-weight: bold;
    font-family: 'Times New Roman', Times, serif;
    width: 25%;
    margin-top: 0px;
    padding: 5px;
}
p.sushi {
    background-color: blanchedalmond;
    color:black;
    text-align: center;
    font-size: large;
    font-weight: bold;
    font-family: 'Times New Roman', Times, serif;
    width: 25%;
    margin-top: 0px;
    padding: 5px;
}

@media (min-width: 768px) and (max-width: 991px) { 
/*tablets*/
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
section {
    float: left;
    margin: 5px;
}
p#description {
    height: 170px;
}
}

@media (min-width: 992px) {
    .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
      float: left;}
.col-lg-1 {width: 8.33%;}
.col-lg-2 {width: 16.66%;}
.col-lg-3 {width: 25%;}
.col-lg-4 {width: 33.33%;}
.col-lg-5 {width: 41.66%;}
.col-lg-6 {width: 50%;}
.col-lg-7 {width: 58.33%;}
.col-lg-8 {width: 66.66%;}
.col-lg-9 {width: 75%;}
.col-lg-10 {width: 83.33%;}
.col-lg-11 {width: 91.66%;}
.col-lg-12 {width: 100%;}
}

Answer 1

因此，在 992px 之后，您可以使用 FlexBox 将所有项目水平对齐在一行中。

在 768px 和 992 之间，您可以使用 CSS 网格创建 2x2 网格，第三个框将跨越第二行。

.container {
  height: 100vh;
  max-width: 1100px;
  margin: 0 auto;
}

.box-1 {
  background-color: red;
}

.box-2 {
  background-color: green;
}

.box-3 {
  background-color: blue;
}

@media screen and (min-width: 992px) {
  .container {
    display: flex;
    flex-direction: row;
    padding: 5rem;
  }

  .container > * {
    flex: 1;
    height: 300px;
  }
}

@media screen and (min-width: 768px) and (max-width: 992px) {
  .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    padding: 5rem;
  }

  .box-3 {
    grid-column: 1 / span 2;
  }

<div class="container">
      <div class="box-1"></div>
      <div class="box-2"></div>
      <div class="box-3"></div>
</div>