0

私のCSSコードはここにあります: http://cssdesk.com/KGUfn

一番下のボックス (icon1、icon2、icon3) を隣り合わせて中央に配置しようとしていますが、うまくいきません。

私は何を間違っていますか？

4

2 に答える 2

2

Icon3にはユニットが必要でright:、「ackground-color：yellow;」というタイプミスがあります。

#icon-3
    {
        position:absolute;
        bottom:0;
        right:300px;
        width:133px;
        height:152px;
        background-color: yellow;
    }
于 2012-11-05T21:40:47.947 に答える
2

あなたは現在、#icon-1として位置付けていますposition: absolute; left: 0; bottom: 0;#icon-2position: absolute; right: 0; bottom: 0;

説明している効果を得るには、次を使用してみてください。

#icon-1, #icon-2, #icon-3 {
    position: absolute;
    bottom: 0;
}
#icon-1 { left: 50%; margin-left: -200px; }
#icon-2 { left: 50%; margin-left: -67px; }
#icon-3 { left: 50%; margin-left: 67px; }

それぞれ幅の要素が3つあるため133px、合計で399px幅があります（基本的に200px）。50%このため、親要素内の位置（left: 50%各アイテムを強調）から開始し、マージンを使用して各要素をオフセットすると、目的のレイアウトが得られます。

の#icon-1設定は、の幅全体に加えて、の幅の半分をmargin-left: -200px占めます。のオフセットは、左端を中心の左側（中心）にそれ自体の幅の半分の距離に設定します。のオフセットは、単に幅の半分に等しい量だけ右に移動し、重複しないようにします。#icon-1#icon-2#icon-2-67px#icon-367px#icon-2

例として、元のコードの更新は次のとおりです：http: //cssdesk.com/cXrsP

#icon-3また、CSSがackground-color: yellow代わりに言ったため、オリジナルは表示されませんでしたbackground-color: yellow

于 2012-11-05T21:40:48.757 に答える