2

タブレットから Web サイトにアクセスするときに 2 つの HTML 要素を切り替えることができるかどうかはわかりません。

今、私は次の設定をしています：

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

私が望むのは、タブレットで Web サイトをコンテンツ セクションの上に表示する場合、次のようになります。

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

相対的な幅でタブレット モードに切り替える前に、別のメディア クエリを追加してデスクトップ モードを縮小することもできます。たとえば、この代替 fiddleのように。

于 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 に答える