如何解决并排放置 div 的移动问题？

Question

我想并排放置div，我做到了。

<div style="width:800px;">
  <div style="width:300px; float:left;"></div>
  <div style="width:300px; float:right;"></div>
</div>

但在移动设备上我想显示一个 div，转到行尾并显示其他 div。

谢谢！

Answer 1

您可以使用 flex

.abc {

width:800px;
}
@media screen and (min-width: 600px) {
  .abc {
display: flex;
  }
}

<div class="abc">
  <div style="width:300px; background-color: red;">Div 1</div>
  <div style="width:300px; background-color: yellow;">Div 2</div>
</div>

Answer 2

设置display: none;为其他div并使用@media-query然后设置display:inline

了解媒体查询：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

@media screen and (min-width: 600px){
.other{
    display:inline!important;
    }
}

<div style="width:800px;">
  <div style="width:300px; float:left;">text1</div>
  <div style="width:100px;display: none;" class="other">Othe div</div>
  <div style="width:300px; float:right;">text2</div>
</div>

如何解决并排放置 div 的移动问题？

How can I fix mobile problems placing divs side by side?

html

css

mobile

alignment

division