两个响应式/灵活的 div 并排

Question

我有两个并排的响应式 div。

当屏幕尺寸小于600px 宽时，这两个 div 重新排列一个在另一个之上，就像他们应该做的那样，但是...我不能让这两个 div 成为 flexible 和 @987654323 @wide 当屏幕尺寸小于600px 时。

我尝试过 flexbox 和许多其他的东西，但就是无法让 div 变得灵活。有谁知道吗？

body
{
  background-color: #fcfcfc;
}
.columns
{
  text-align: center;
  padding-right: 15px;
  padding-left: 15px;
  padding-top: 0;  
}
.left-div
{
  display: inline-block;
  max-width: 400px;
  text-align: left;
  padding: 10px;
  background-color: #ddd;
  border-radius: 3px;
  margin: 5px;
  vertical-align: top;
}
.right-div
{
  display: inline-block;
  max-width: 400px;
  text-align: left;
  padding: 10px;
  background-color: #ddd;
  border-radius: 3px;
  margin: 5px;
}
.left-text, .right-text
{ text-align:justify;
}
@media screen and (max-width: 600px) 
{
  .left-div, .right-div
    {
       max-width: 100%;
    }
}

<div class="columns">

<div class="left-div left-text">
<p> Lorem ipsum LEFT.</p>
</div>
<div class="right-div right-text">
<p> Lorem ipsum RIGHT.</p>
</div>
</div>

Answer 1

除了指定max-width:100% 之外，您还需要创建width:100%。您还需要添加box-sizing:border-box; 以避免由于使用填充而导致的一些溢出。

查看完整代码，我使用了 800px 而不是 600px，所以我们可以在这里看到结果。

body {
  background-color: #fcfcfc;
}

.columns {
  text-align: center;
  padding-right: 15px;
  padding-left: 15px;
  padding-top: 0;
}

.left-div {
  display: inline-block;
  max-width: 400px;
  text-align: left;
  padding: 10px;
  background-color: #ddd;
  border-radius: 3px;
  margin: 5px;
  vertical-align: top;
}

.right-div {
  display: inline-block;
  max-width: 400px;
  text-align: left;
  padding: 10px;
  background-color: #ddd;
  border-radius: 3px;
  margin: 5px;
}

.left-text,
.right-text {
  text-align: justify;
}

@media screen and (max-width: 800px) {
  .left-div,
  .right-div {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }
}

<div class="columns">

  <div class="left-div left-text">
    <p> Lorem ipsum LEFT.</p>
  </div>
  <div class="right-div right-text">
    <p> Lorem ipsum RIGHT.</p>
  </div>
</div>

Answer 2

将您的元素显示为块，以便它们可以占据可用的整个水平宽度，例如： display: block;

为了更好的衡量，声明width: 100%

@media screen and (max-width: 600px) {
      .left-div,
      .right-div {
        max-width: 100%;
        /* Additional */
        width: 100%;
        display: block;
      }
    }

body {
  background-color: #fcfcfc;
}

.columns {
  text-align: center;
  padding-right: 15px;
  padding-left: 15px;
  padding-top: 0;
}

.left-div {
  display: inline-block;
  max-width: 400px;
  text-align: left;
  padding: 10px;
  background-color: #ddd;
  border-radius: 3px;
  margin: 5px;
  vertical-align: top;
}

.right-div {
  display: inline-block;
  max-width: 400px;
  text-align: left;
  padding: 10px;
  background-color: #ddd;
  border-radius: 3px;
  margin: 5px;
}

.left-text,
.right-text {
  text-align: justify;
}

@media screen and (max-width: 600px) {
  .left-div,
  .right-div {
    max-width: 100%;
    /* Additional */
    width: 100%;
    display: block;
  }
}

<div class="columns">

  <div class="left-div left-text">
    <p> Lorem ipsum LEFT.</p>
  </div>
  <div class="right-div right-text">
    <p> Lorem ipsum RIGHT.</p>
  </div>
</div>

或者您可以“只使用 Flex”...

@media screen and (max-width: 600px) {

  .columns {
    display: flex;
    justify-content: center;
    flex-direction: column;
  }

  .left-div,
  .right-div {
    max-width: 100%;
  }
}

body {
  background-color: #fcfcfc;
}

.columns {
  text-align: center;
  padding-right: 15px;
  padding-left: 15px;
  padding-top: 0;
}

.left-div {
  display: inline-block;
  max-width: 400px;
  text-align: left;
  padding: 10px;
  background-color: #ddd;
  border-radius: 3px;
  margin: 5px;
  vertical-align: top;
}

.right-div {
  display: inline-block;
  max-width: 400px;
  text-align: left;
  padding: 10px;
  background-color: #ddd;
  border-radius: 3px;
  margin: 5px;
}

.left-text,
.right-text {
  text-align: justify;
}

@media screen and (max-width: 600px) {

  .columns {
    display: flex;
    justify-content: center;
    flex-direction: column;
  }

  .left-div,
  .right-div {
    max-width: 100%;
  }
}

<div class="columns">

  <div class="left-div left-text">
    <p> Lorem ipsum LEFT.</p>
  </div>
  <div class="right-div right-text">
    <p> Lorem ipsum RIGHT.</p>
  </div>
  
</div>

请注意！flex-box 对旧版浏览器的支持很差或有限，因此如果您担心这点，最好不要在生产环境中使用它。

IE 不支持
IE 10,11 - 部分支持
查看更多： https://caniuse.com/#feat=flexbox

编辑：正如@TemaniAfif 在 cmets 中指出的那样，您也应该设置一个 border-box 属性，例如： box-sizing: border-box

.left-text,
.right-text {
  text-align: justify;
  box-sizing: border-box;
}

通常，这设置为全局规则，使用 global 选择器，例如： * { box-sizing: border-box; }

border-box 告诉浏览器考虑任何边框和填充 在您为宽度和高度指定的值中。如果你设置一个元素的 宽度为 100 像素，这 100 像素将包括任何边框或 您添加的填充，内容框将缩小以吸收它 额外的宽度。这通常会使调整元素大小变得容易得多。

想了解更多？ https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing