两个反应灵敏/灵活的潜水器并排

Question

我有两个并排的响应div。

当屏幕大小小于600px宽时，这两个div会像它们应该做的那样将一个重新排列在另一个之上，但是。。。当屏幕大小小于600px时，我无法将这两个div设置为flexible和100%宽。

我尝试过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<=9-不支持
IE 10,11-部分支持
查看更多信息：https://caniuse.com/#feat=flexbox

编辑：正如@TemaniAif在评论中所指出的，您也应该设置border-box属性，例如：box-sizing: border-box

.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