0 
<div id="wrapper">
  <div id="top-part">
    some para here
  </div>
</div>

メインCSS:

#wrapper {
  position: relative;
  width: 1024px;
  margin: 0 auto;
  display: block;
}

これは、スクロールバーのないウィンドウでいっぱいです。
ただし、上記のラッパーの後に別のコンテンツを追加すると、スクロールバーが表示されます。どうして？？

<div id="wrapper">
  <div id="wrap">
    <p>
      <img src="images/some.gif" />
      some para here
    </p>
    <a href="#">Link here</a>
  </div>
</div>

ラップコンテンツを 3 回以上挿入しました... Css はこちら.....

#wrap {width: 322px; margin: 6px;}

、マージンなどを排除しようとしましたdisplay: inline-block。どうすればよいですか？class="wrap" も試しました。

4

2 に答える 2

0

問題が発生している可能性が 2 つあります。

1. 垂直スクロール バーが表示され、水平スクロール バーが表示される

要素を画面の正確な幅になるように配置すると、垂直スクロール バーが表示されるたびに、使用可能な水平幅が減少し、水平スクロール バーも表示されることになります。要素をページの幅全体に広げるために幅を指定する必要はありませんdisplay: block(float または絶対位置を使用する場合を除く)。代わりに、削除するだけwidth: 1024px;で、要素が自動的に伸びて利用可能なスペースを埋める必要があります。

2. 横にあふれる子どもたち

ラッピングする親内の子は、特定の CSS またはスタイリングによって強制された場合、常にその親の外に拡張されます。つまり、フローティングの子がいる場合 -- 例:

+--------------------+
| +---+ +------+ +------+
| |   | |      | |      |
| +---+ +------+ +------+
+--------------------+

親がページの全幅になるように寸法が設定されている場合、子がスクロール可能な領域の外に押し出されるため、水平スクロール バーが表示されます。これを防ぐoverflow: hiddenには、ラッピング要素で使用できます。

+--------------------+
| +---+ +------+ +---|
| |   | |      | |   |
| +---+ +------+ +---|
+--------------------+

更新： - あなたのコメントに関して

画面/ビューポートが小さいときにコンテンツを表示するための最良の方法を見つけようとしているようです。このためのベスト プラクティスは、スクロールバーを無効にしたり使用したりするのではoverflow:hiddenなく、代わりに「レスポンシブ レイアウト」と呼ばれるものを作成することです。このようなレイアウトを実現する方法はいくつかありますが、それらはすべて、ターゲット ユーザーとターゲット デバイスに大きく依存します。ただし、どのルートを選択しても、それらはすべて同じ基本原則に従います。

  1. 最も重要なコンテンツが最初に表示されるようにレイアウトを設計します。
  2. サイズを変更するか、複数列構成を使用して、レイアウトが引き伸ばされるように設計します。
  3. ラッパーで固定幅を使用することは避けてください。ただし、サブ要素では使用できます。
  4. 使い方max-widthを学び、min-width
  5. 「プログレッシブ エンハンスメント」の使い方を学びましょう。つまり、ほとんどの場合にうまく機能するベース レイアウトを用意する必要がありますが、より優れた機能をサポートできる場合はさらに効果的です。

レスポンシブ レイアウトを作成する最も簡単な方法は、既製のベース テンプレートから始めることです。ここにあなたが始めることができるいくつかがあります：

  1. http://www.getskeleton.com
  2. http://twitter.github.com/bootstrap
  3. http://www.responsivegridsystem.com

キーワードresponsive html templateやresponsive html boilerplate.


簡単に言えば

基本的なルールとして、デザインをいくつかの列に分割し、これらをフロートするfloat: leftか、または などの他の配置機能を使用することをお勧めしますdisplay: inline-block。ただし、フローティングに入ったら、ある種の明確な修正を使用するか、overflow: hidden. シンプルなレスポンシブ レイアウトは次のようになります。

<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

次の css を使用します。

.row { 
  overflow: hidden;
  background: #aaa;
  padding: 10px;
}

.row .col {
  float: left;
  width: 200px;
  background: #777;
  margin: 2px;
}

ワイド スクリーンでは、このレイアウトは次のように表示されます。

+--------------------+
| +---+ +---+ +---+  |
| |   | |   | |   |  |
| +---+ +---+ +---+  |
+--------------------+

ただし、小さい画面では次のように表示されます。

+---------+
| +---+   |
| |   |   |
| +---+   |
| +---+   |
| |   |   |
| +---+   |
| +---+   |
| |   |   |
| +---+   |
+---------+

コツは、最も重要なコンテンツが一番上に来るように要素を並べることです。最も重要でないコンテンツは、ページの下部に配置できます (または、展開する CSS/JS トリックに応じて)、そのコンテンツを非表示にするか、まったく別の場所に表示されるように変換できます。かなり複雑になる可能性があり、常に進化している分野です。そのため、難しい作業を行うことができるベース テンプレートから始めることをお勧めします。

于 2013-03-06T11:44:32.207 に答える