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

Question

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

当屏幕尺寸小于600px时宽，这两个 div 将一个重新排列在另一个之上，就像他们应该做的那样，但是......我不能让这两个 div 成为 flexible和 100%当屏幕尺寸小于 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>