1

私はすでにいくつかの質問がこの方向に進んでいるのを見てきましたが、何も役に立ちませんでした。親のdivの位置を相対に設定し、子のdivの位置を絶対に設定するだけだと誰もが言っています。しかし、私の問題は、すべてのdivが親divの0/0ポイントにあることです。内側の要素はお互いを知らないようです。

私のページは次のようになります。

http://imageshack.us/photo/my-images/854/unbenanntgoc.png/

私のhtmlでは、divを定義するだけです。

<div id="content">

<div id="header" />
<div id="naviContent" />
<div id="imageContent" />
<div id="tagContent" />
<div id="textContent" />

</div>

したがって、ナビ画像とタグコンテンツのdivはフロートする必要があります。

そして、これは私のcssがどのように見えるかです：

@charset "utf-8";

body {
    background-color:#33FF00;
}

#header {
    height:100px;
    background-color:#FFFFFF;
    position:relative;
}

#naviContent {
    width:25%;
    background-color:#F0F;
    float:left;
}

#imageContent {
    background-color:#000;
    position:absolute;
    float:left;
    width:800px;
    height:600px;
}

#tagContent {
    background-color:#900;
    position:absolute;
    float:left;
    width: 25%;
}

#textContent {
    background-color:#0000FF;
    clear:both;
}

#content {
    height:1600px;  
    width:1200px;
    background-color:#999999;
    margin-left: auto; 
    margin-right: auto;
    padding:10px;
    position:relative;
}

それで、私のすべての要素（黒、黄、赤、灰色、緑）がピンクの要素の0/0ポイントに配置されている理由を誰かが教えてくれるかもしれません。

前もって感謝します

4

3 に答える 3

2

DIV を適切に閉じる必要があります -

<div id="content">

<div id="header">Header </div>
<div id="naviContent">Nav</div>
<div id="imageContent">Image</div>
<div id="tagContent"> Tags</div>
<div id="textContent">Text  </div>

</div>

編集: フィドルの作業フロート幅を調整する必要があり、完了です!

于 2012-07-24T10:22:41.927 に答える
0

次のようにコーディングする必要があります: - http://tinkerbin.com/J9CCZXRL

CSS

#content {
background:pink;
  width:500px;
  padding:10px;
  -moz-box-sizing:border-box;
  overflow:hidden;
}



#header {
  background:red;
  height:100px;

}

#left {
background:green;
  width:100px;
  height:400px;
  float:left;
}

#middle {
background:blue;
  width:260px;
  float:left;
  height:400px;
  margin-left:10px;
}
#right {
background:yellow;
  width:100px;
  float:right;
  height:400px;
}

#footer {
background:grey;
height:100px;
  clear:both;
}

HTML

<div id="content">
  <div id="header"></div>
  <div id="left"></div>
  <div id="middle"></div>
  <div id="right"></div>
  <div id="footer"></div>
</div>
于 2012-07-24T10:42:00.953 に答える
0

絶対位置は、ページをレイアウトする標準的な方法ではありません。

すべきことは、position 属性を削除し、すべてを左にフロートさせ、幅を設定することです (正しくレンダリングするには、div にコンテンツが必要になることに注意してください)。

事前定義されたクラスを使用して標準化された方法で開発のこの部分を処理するため、 960.gsなどの CSS グリッド システムを調べることをお勧めします。

于 2012-07-24T10:27:04.660 に答える