1

これは以前に尋ねられたと確信していますが、答えだけではなく、なぜこれが何をしているのかを知りたいです（もしあれば）。

私が持っているのは、現時点では非常にシンプルなレイアウトで、メイン ラッパー div、ヘッダー div、コンテンツ div、フッター div で構成されています。私が抱えている問題は、コンテンツ div 内に多数の正方形を配置し、それらの位置を絶対に設定するようになったときです。これにより、それらがコンテンツ div の幅全体に広がるようにグリッドに配置されます。これらの div を絶対に設定すると、フッター div がジャンプして、親コンテンツ div にある div のグリッドの下に表示されません。コンテンツ div の高さを値に設定すると、フッター div は本来あるべき場所に配置されますが、設定しないか自動に設定すると (やりたいように)、フッター div はコンテンツ div の下に効果的に配置されます。

何かを絶対に設定すると、ドキュメントの通常のフローから外れることを読みましたが、とにかくコンテンツ div を設定して、コンテンツ div の高さがコンテンツ (つまり、div のグリッド) によって設定されるようにすることができます。また、フッター div が常にコンテンツ div の下に配置されるようにしますか?

ここにモックアップがありますhttp://jsfiddle.net/M4jyH/3/

そして、ここに私のコードがあります

#wrapper {
width: 400px;
height: auto;
border: 1px solid #000; 
margin: 10px auto;   
padding: 10px;    
}

#header {
width: 100%;
height: 50px;
border: 1px solid #000;
}

#content {
position: relative;
width: 100%;
/*height:92px;*/

border: 1px solid #000; 
margin: 10px 0px 0px 0px;        
}

.box {
position: absolute;
width: 92px;
height: 92px; 
background-color: #999;    
}

#footer {
position: relative;
width: 100%;
height:92px;
border: 1px solid #000; 
margin: 10px 0px 0px 0px; 
}


<div id="wrapper">

<div id="header">header</div>

<div id="content">

    <div class="box" style="top:0px; left:0px;"></div>
    <div class="box" style="top:0px; left:102px;"></div>
    <div class="box" style="top:0px; left:205px;"></div>
    <div class="box" style="top:0px; left:308px;"></div>

</div>

<div id="footer">footer</div>

</div>​
4

1 に答える 1

2

position: absolute内側の要素に使用する必要はありません。それらを水平に配置するfloat: leftには、間隔のマージンを使用してください。コンテンツ領域に関しては、同様の折りたたみ高さが引き続き得られます。これは、フロートがコンテンツ フローから部分的に取り除かれているためです。ただし、これはoverflow: hiddenコンテンツ領域に適用することで簡単に修正できます。

boxマージンの処理を簡単にするために、最初と最後のクラスを要素に追加しました。

<div id="content">
  <div class="box first"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box last"></div>
</div>

また、CSS 項目を次のように変更しました。

#content {
  overflow: hidden; /* <-- added overflow hidden */
  position: relative;
  width: 100%;
  outline: 1px solid #000;
  margin: 10px 0px 0px 0px;        
}

.box {
  float: left; /* <-- replaced pos abs with float left */
  margin-right: 10.5px; /* <-- added a specific margin */
  width: 92px;
  height: 92px;
  background-color: #999;    
}

.box.last {
  margin-right: 0px;
}

マージンの使用に関しては、使用10.5pxする寸法を再評価した方がよいので、これは必要ありません。ただし、最新のブラウザのほとんどはこれを正しく処理します。

http://jsfiddle.net/M4jyH/5/

position: absolute実際には、ドキュメント フローから除外したいアイテムにのみ使用し、他のものに干渉しないようにする必要があります。

于 2012-11-25T02:24:53.123 に答える