重新排列移动设备的容器
Posted
技术标签:
【中文标题】重新排列移动设备的容器【英文标题】：Rearranging containers for mobile devices 【发布时间】：2017-12-24 00:23:38 【问题描述】：我想让我的桌面友好网站也适合移动设备。
This 是它在移动设备上的样子。
This 是我希望它寻找移动用户的方式。
这种布局背后的原因是它在桌面上看起来不错，每行有 2 列。
html代码：
<html>
<div class="outer-container">
<div class="inner-container">text</div>
<div class="inner-container">img</div>
</div>
<div class="outer-container">
<div class="inner-container">img</div>
<div class="inner-container">text</div>
</div>
<div class="outer-container">
<div class="inner-container">text</div>
<div class="inner-container">img</div>
</div>
</html>
CSS代码：
.outer-container
width:100%;
.inner-container
float:left;
width:50%;
@media screen and (max-width:480px)
.inner-container
width:100%;
【问题讨论】：
【参考方案1】：您可以使用flex 来执行此操作。创建一个column 并使用子级的order 属性来重新组织你认为合适的。
.outer-container
width:100%;
.inner-container
float:left;
width:50%;
@media screen and (max-width:480px)
.inner-container
width:100%;
.outer-container
display: flex;
flex-direction: column;
.t
order: -1;
<html>
<div class="outer-container">
<div class="inner-container t">text</div>
<div class="inner-container i">img</div>
</div>
<div class="outer-container">
<div class="inner-container i">img</div>
<div class="inner-container t">text</div>
</div>
<div class="outer-container">
<div class="inner-container t">text</div>
<div class="inner-container i">img</div>
</div>
</html>【讨论】：
以上是关于重新排列移动设备的容器的主要内容，如果未能解决你的问题，请参考以下文章