当页面达到特定宽度时，如何使div超过另一个div？

Question

我成功创建了两个单独的div：一个floats left，一个floats right。它们都在同一部分。

当页面调整为大约600px时，我希望div显示在第二个div之上。

以下是代码

.wrapper {
  display: flex;
}

#left {
  float: left;
}

#me {
  width: auto;
  height: auto;
  max-width: 50%;
}

#right {
  float: right;
}

<section class="wrapper">

  <div id="left">
    <img id="me" src="https://upload.wikimedia.org/wikipedia/en/thumb/4/47/Spongebob-squarepants.svg/1200px-Spongebob-squarepants.svg.png">
  </div>

  <div id="right">
    <h1>Heading</h1>
    <p>Text</p>
  </div>

</section>

Answer 1

你已经设置了display：flex;你的.wrapper所以浮动嵌套元素是多余的。您可以使用媒体查询来实现您的目标。

＆＃13;

＆＃13;

.wrapper {
display: flex;
}

#me {
width:auto;
height:auto;
max-width:50%;
}


@media all and (max-width: 600px) {
  .wrapper {
    display: block;
  }
}

＆＃13;

<section class="wrapper">

  <div id="left">
    <img id="me" src="https://upload.wikimedia.org/wikipedia/en/thumb/4/47/Spongebob-squarepants.svg/1200px-Spongebob-squarepants.svg.png">
  </div>

  <div id="right">
    <h1>Heading</h1>
    <p>Text</p>
  </div>

</section>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以添加media query来获取此布局。您只需在flex-flow: row wrap;中添加media query即可。wrapper。

  

当您使用flex element属性时，您不必这样做   为它的子元素提供float属性。

这是工作 Sinppet

.wrapper {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}

#me {
  width: auto;
  height: auto;
  max-width: 50%;
}

@media only screen and (max-width: 576px) {
  .wrapper {
    -webkit-flex-flow: row wrap;  
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
  }
}

<section class="wrapper">

  <div id="left">
    <img id="me" src="https://upload.wikimedia.org/wikipedia/en/thumb/4/47/Spongebob-squarepants.svg/1200px-Spongebob-squarepants.svg.png">
  </div>

  <div id="right">
    <h1>Heading</h1>
    <p>Text</p>
  </div>

</section>