使用 CSS 重新定位页面布局答案

【问题标题】：Repositioning page layout with CSS使用 CSS 重新定位页面布局
【发布时间】：2013-04-11 06:31:25
【问题描述】：

我有一个问题，我希望使用 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 来做到这一点？提前致谢。

【问题讨论】：

标签： css html mobile media-queries page-layout

【解决方案1】：

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

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

希望这会有所帮助！ :)

【讨论】：

【解决方案2】：

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

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

【讨论】：