2

我不知道从平板电脑访问网站时是否可以切换两个 HTML 元素。

现在我有以下设置：

<section id="content"></section><!-- End section#content -->
<aside id="sidebar"></aside><!-- End aside#sidebar -->

我想要的是，当您在平板电脑上查看网站时，内容部分上方的旁边位置，如下所示：

<aside id="sidebar"></aside><!-- End aside#sidebar -->
<section id="content"></section><!-- End section#content -->

什么是最好的解决方案？一个简单的CSS或我必须使用的行Javascript以及它应该是什么样子。

4

2 回答 2

3

您可以通过 css 实现您想要的：只需浮动#content，#sidebar默认情况下并在平板电脑模式下删除浮动。此外，您可以width: 100%在平板电脑模式下进行设置。

看看我的小提琴。

在平板电脑模式下按照您的需要排列 html：

<aside id="sidebar"></aside><!-- End aside#sidebar -->
<section id="content"></section><!-- End section#content -->

和基本的CSS：

#content {
    float: right;
    width: 700px;
    height: 200px;
}

#sidebar {
    float: right;
    width: 200px;
    height: 200px;
}

@media screen and (max-width: 900px) {
    #sidebar, #content {
    clear: both;
    width: 100%;
   }
}

在切换到具有相对宽度的平板电脑模式之前，您还可以添加另一个媒体查询以缩小桌面模式。例如，就像在这个替代小提琴中一样。

于 2013-03-27T16:30:40.223 回答
1

你可以用 jQuery 做到这一点。

 $('#content').clone().insertAfter('#sidebar');

 //You will also have to remove the first content element. 
 //You could do something like this to remove it

  $('#content').eq(0).remove();

  //or this 

  $('#content:first-child').remove();

http://jsfiddle.net/ckhGe/

于 2013-03-27T16:17:12.593 回答