CSS 响应式布局帮助：Div 不在同一条线上

Question

我正开始自学如何编写代码并完成任务以创建响应式网站，但不能使用 Twitter bootstrap 等框架或任何新的网格属性。问题是我正在尝试让 3 divs 对齐最小宽度为 992px 的设备以及最小宽度为 768px 和最大宽度为 991px 的设备，我正在尝试在两个中间得到两个，在底部得到一个。使用我当前的代码，我可以在顶部获得 3 个，但是当我转到平板设备时，我将所有 3 个垂直放置并占据屏幕的 50%。

我试过调整宽度属性，删除填充和边距，添加带有“容器”class 的总体 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>

CSS 响应式布局帮助：Div 不在同一条线上

CSS Responsive Layout help: Div not staying on the same line

css

col

responsive-design