首页 文章

重新安排移动设备的容器

提问于
浏览 次
2

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

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%;
  }
}
html css html5 mobile containers

1 回答

  • 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>
    回复于

相关问题