Question

我有两个div，它在destop计算机上正确显示。但是在移动浏览器上，它们看起来并不好看。

如何在移动浏览器中将div2置于div1下（而不是在samme线上）？

<html>

<head>
<style>
.flexcontainer {
    display: flex;
    justify-content: space-between;
    width: 1200px;
    margin-bottom: 40px;
    border:1px solid red;
}

.itemcontainer {

    flex-wrap: wrap;
}
</style>
</head>

<body>

<div class="flexcontainer itemcontainer ">

<div id="div1" style="border:1px solid blue; width:280px; height:300px; margin-right:auto;"> Yessss </div>
<div id="div2" style="border:1px solid blue; width:280px; height:300px; margin-left:auto">No</div>
</body>
</div>
</html>

Answer 1

@media (max-width: 767px) {
  .flexcontainer{
    flex-direction : column;    
  }
}

只需在移动视图中将弹性方向更改为列。

您可以通过本网站练习和理解Flexbox： https://flexboxfroggy.com/

Answer 2

首先：父div的结束标记低于body的结束标记 第二：将此css代码段添加到您的代码中

@media (max-width: 767px) {
    .flexcontainer {
        display:block;
        width: auto;
    }
    #div1, #div2 {
        margin: 0 !important;
    }
}

让我知道这是否是您正在寻找的

在mobil浏览器上显示div1下的div2 - css：flex，

2 个答案: