0

ファイルを掘り下げて調査するのに何時間も費やしていなければ、本当に質問を投稿することはなかったでしょう。何を探しているのか本当にわからないに違いない :-|

以下のように、レスポンシブ デザインを iPhone のサイズにスケーリングすると、コンテナー (またはコンテナー自体) の div が 100% 幅に変更される方法と理由を知りたいです。

http://demo2.woothemes.com/whitelight/about/

サイドバーはメイン コンテンツの下にあり、内部の div は 100% に伸びます

それは私を絶対に怒らせています！どんな助け/指示も感謝しなければなりません:)

4

1 に答える 1

0

基本的なメディア クエリ レスポンシブ レイアウトの例:

デモ: http://jsbin.com/ayojan/1/edit

ブラウザーのサイズを変更して効果を確認します。

div {
  outline:solid black;
}
.content {
  width:80%;
  float:left;
}
.sidebar {
  width:20%;
  float:left;
}

@media only screen and (max-width: 767px) {
  .sidebar {
    width:100%;
    float:none;
}
  .content {
    width:100%;
    float:none;
  }

}

重要なポイント: メディア クエリ内で、要素を unfloat (float:none) して width: 100% に設定します。

于 2013-07-13T17:17:55.033 に答える