如何解决将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

将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>

Answer 2

您可以使用flex

执行此操作

＆＃13;

＆＃13;

.abc {

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;