0

モバイル ビューの CSS を使用して Web ページの配置を変更したいという問題があります。デスクトップ用の現在のセットアップは、左側にフローティングされたサイドバーと右側にフローティングされたテキストボックスです。HTML は次のとおりです。

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

私のジレンマは、モバイル デバイスでサイドバーのコンテンツをテキスト ボックスの下に表示したいのですが、これを行うための CSS を作成するのに苦労していることです。メディア クエリを使用してスマートフォンをターゲットにしています。

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

誰でもこれを行うための CSS を提供できますか? 前もって感謝します。

4

2 に答える 2

0

それは非常に簡単です。これを行うには、このように使用する必要があります

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

お役に立てれば ！:)

于 2013-04-10T22:31:25.187 に答える