将 2 个 DIV 定位在 1 个 DIV 下答案

【问题标题】：Positioning 2 DIVs under one DIV将 2 个 DIV 定位在 1 个 DIV 下
【发布时间】：2020-10-22 22:22:43
【问题描述】：

我正在制作一个具有响应式布局的页面。我无法将 2 个 DIV 放在一个 DIV 元素下。我从这里尝试了 Flexbox、Float 和其他解决方案。

col-1,col-2 和 col-3 都在 .three-col div 中

这是 CSS：

.three-col {
    margin: 20px auto 0 auto;
    flex-direction: row;
}


  @media screen and (min-width: 550px) {
    body {
      background-color: yellow;

    }
    !!!HERE IS THE PROBLEM!!!
    .col-2
    {
        float: left;
    }
    .col-3
    {
        float:left; 
        clear: left;
    }
  }
  
  @media screen and (min-width: 600px) {
    .three-col {
        margin: 20px auto 0 auto;
        display: flex;
    }
  }

.col-1, .col-2, .col-3 {
    padding: 20px;
}

.col-1 {
    background-color: lightpink;
}

.col-2 {
    background-color: lightgreen;
}

.col-3 {
    background-color: aquamarine;
}

这就是它在 CSS 文件的中间情况下的样子：

HTML 模型：

<body>
    <div class="three-col">
        <div class="col-1">
            <h1>Column One</h1>
            <p>
                Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a
                .</p>
            <p>
                Lorem Ipsum 
                from a line in section 1.10.32.
            </p>
        </div>
        <div class="col-2">
            <h2>Column Two</h2>
            <p>There ng this the first true generator on the Internet. It uses a dictionary of over 200
                Latr, or
                non-characteristic words etc.</p>
        </div>
        <div class="col-3">
            <h2>Column Three</h2>
            <p>Iibution
                of letters, as opposed to using 'Content here, content here', making it look like reglish.</p>
            <p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their .</p>
        </div>
    </div>
</body>

【问题讨论】：

请同时发布您的 HTML。我们需要一个minimal reproducible example

标签： html css

【解决方案1】：

在我看来，最简单的方法是使用 flexbox。另请记住，这是无效的 css '!!!HERE IS THE PROBLEM!!!'，它可能会阻止解析。

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.three-col {
  margin: 20px auto 0 auto;
  flex-direction: row;
}

@media screen and (min-width: 550px) {
  body {
    background-color: yellow;
  }
  .three-col {
    display: flex;
    flex-wrap: wrap;
  }
  .col-1 {
    width: 100%
  }
  .col-2, .col-3 {
    width: 50%;
  }
}

@media screen and (min-width: 600px) {
  .three-col {
    margin: 20px auto 0 auto;
    display: flex;
  }
}

.col-1,
.col-2,
.col-3 {
  padding: 20px;
}

.col-1 {
  background-color: lightpink;
}

.col-2 {
  background-color: lightgreen;
}

.col-3 {
  background-color: aquamarine;
}

<body>
<div class="three-col">
    <div class="col-1">
        <h1>Column One</h1>
        <p>
            Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a
            .</p>
        <p>
            Lorem Ipsum 
            from a line in section 1.10.32.
        </p>
    </div>
    <div class="col-2">
        <h2>Column Two</h2>
        <p>There ng this the first true generator on the Internet. It uses a dictionary of over 200
            Latr, or
            non-characteristic words etc.</p>
    </div>
    <div class="col-3">
        <h2>Column Three</h2>
        <p>Iibution
            of letters, as opposed to using 'Content here, content here', making it look like reglish.</p>
        <p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their .</p>
    </div>
</div>
</body>

【讨论】：

但是现在当它超过 600 px 时它不会返回，它应该将所有的 DIV 放在一行中
我的问题是我应该在最后一个@media 中添加什么以将所有 DIV 放在一行上？
检查一下codepen.io/fromaline/pen/zYBoEOQ 你需要指定flex-wrap: nowrap 并使 div 回到 100% 宽度
谢谢您，先生。你救了我。