时间戳

首页 > 解决方案 > 如何解决并排放置 div 的移动问题？

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

问题描述

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

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

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

谢谢！

标签： htmlcssmobilealignmentdivision

解决方案

设置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>

推荐阅读