css - 使用 CSS 重新定位页面布局

Question

我有一个问题，我希望使用 CSS 为移动视图更改网页的定位。当前的桌面设置是向左浮动的侧边栏和向右浮动的文本框。HTML如下：

<div id="container">
   <div id="sidebar">...</div>
   <div id="textbox">...</div>
</div>

我的困境是，在移动设备上，我希望侧边栏内容出现在文本框下方，而我正在努力生成 CSS 来做到这一点。我正在使用媒体查询来定位智能手机，例如：

@media screen and (max-width:479px) {
  /* Target portrait smartphones */
}

谁能给我提供CSS来做到这一点？提前致谢。

Answer 1

#sidebar在您的 html 中添加after是最简单#textbox的，这不会影响桌面查看，然后对于移动设备，您可以删除浮动：

@media screen and (max-width:479px) {
  #sidebar, #textbox {
    float: none;
  }
}

Answer 2

这很简单，为了做到这一点，你应该像这样使用它

<div id="container">
   <div id="textbox">...</div>
   <div id="sidebar">...</div>
</div>

首先是文本框，因为您将删除移动设备的浮动。所以文本框首先出现，然后是侧边栏。

的CSS：

.textbox {
    width: ***px;
    float right;
}
.sidebar {
    width: ***px;
    float left;
}
@media screen and (max-width:479px) {
  /* Target portrait smartphones */
  .textbox, .sidebar {
     float: none;
  }
}

希望这可以帮助 ！:)