20

私はcssコードを持っています。

なぜがbottom: 0機能しないのposition: relative;ですか？

私が諦めたらposition: relative;、bottom作品はありますがfloat: left、でfloat: rightはありませんwidth: 930px;。

申し訳ありませんが私の悪い英語

#main {
  position: relative;
  width: 930px;
  padding: 10px;
  margin: 0 auto;
}

#left {
  position: absolute;
  left: 0;
}

#right {
  position: absolute;
  right: 0;
}

#bottom {
  position: absolute;
  bottom: 0;
}
<div id="main">
  <div id="left">
    Left
  </div>
  <div id="right">
    Right
  </div>
  <div id="bottom">
    Bottom
  </div>
</div>

4

2 に答える 2

36

これはposition:relative、メインに設定している場合position:absoluteは、親を基準にしているためです。また、#maindivには高さが#bottomないため、ページの下部に表示されません。

于 2012-05-24T07:35:35.930 に答える
2

これは行く方法ではありません、そのようfloatなタイプのレイアウトに使用してください。

あなたの質問に戻って、

bottom:0は正常に動作していますが、メインに高さがないため、表示されていません。

#mainのためにこれを行う

    #main
    {
        position: relative;
        width: 930px;
        padding:10px;
        margin:0 auto; 
        height:200px;
    }

編集：

使用できます、

#main {
    position: relative;
    width: 930px;
    padding:10px;
    margin:0 auto; 
}

#left {
    position:absolute;
    left:0;
    top:0;
}

#right {
 position:absolute;
 right:0;
 top:0;
}

#bottom {
    left:0;
    position: absolute;
    bottom:-20px;
}

しかし、私はこれをお勧めしません（前にこのレイアウトはによって処理されるべきではないと言いましたfloat） 他の要素absoluteを考慮していないので、このコードはより高い高さpositionがあると壊れます。#left

もし私があなただったら、これを使っていただろう、

#main {
    position: relative;
    width: 930px;
    padding:10px;
    margin:0 auto; 
}

#left {
    float:left;
}

#right {
  float:right;
}

#bottom {
    clear:both;
}
于 2012-05-24T07:39:31.280 に答える