Question

我有两个响应的divs并排。

当屏幕尺寸小于600px宽时，这两个div会重新排列一个，就像他们应该做的那样，但是......我不能让这两个div成为{{1}屏幕尺寸小于flexible时，{}和100%宽。

我已经尝试过flexbox和其他许多东西，但只是不能让div灵活。有人知道吗？

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: 600px) 
{
  .left-div, .right-div
    {
       max-width: 100%;
    }
}

Answer 1

除了指定width:100%之外，您还需要max-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对旧版浏览器的支持很少或有限，所以如果这对您来说是个问题，那么最好不要在生产中使用它。 / p>

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

编辑：正如@TemaniAfif在评论中指出的那样，您还应设置border-box属性，例如： box-sizing: border-box < / p>

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

通常情况下，使用全局选择器将此设置为全局规则，例如： * { box-sizing: border-box; }

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

想要了解详情？ https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

两个响应/灵活的div并排

2 个答案: