gpt4 book ai didi

css - 为移动设备重新排列容器

转载 作者:行者123 更新时间:2023-11-28 00:55:29 25 4
gpt4 key购买 nike

我想让我的桌面友好型网站也适合移动设备。

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%;
}
}

最佳答案

您可以使用 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>

关于css - 为移动设备重新排列容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45178551/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com