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

在html中#sidebar之后#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;
  }
}

希望这有帮助！：）

使用CSS重新定位页面布局

2 个答案: