0

おはよう、

純粋な CSS を使用して 4 列のフッターを開発していますが、いくつかの問題に遭遇しました。列は 1 つの幅に表示されず、4 番目の列は下に突き出ています。

ここに私のコードがあります: http://jsfiddle.net/eLzPk/

4

3 に答える 3

1

フッターの正確な幅がわかっている場合は、純粋な css でこれを行うことができます。最初の 3 列に右罫線を追加しました。参考までに、CSS で境界線の色を宣言するのを忘れていました。また、列の幅を 940 / 4 である 235px に変更しました。最初の 3 つには 1px の境界線があるため、幅は 234px と境界線です。ここにフィドルがありますhttp://jsfiddle.net/eLzPk/7/

#footer dl {
    background: black;
    float: left;
    margin: 0;
    padding: 10px 0 5px 0;
    width: 234px;
    border-right: 1px solid #fff;
}

#footer dl + dl + dl + dl {
    width: 235px;
    border-right: none;
}

編集

css の問題の 1 つをさらに説明すると、宣言された幅に境界線とマージンが追加されるため、幅が 25% の 4 つの列と境界線を作成するための 1px の境界線がある場合、実際には 100% +もちろん、これは 100% より大きいため、CSS がラップされます。

css にはこれに対する 2 つの新しい解決策があり、そのうちの 1 つはかなりサポートされています。 http://css-tricks.com/box-sizing/ 基本的に、宣言された幅に合わせてボックスのサイズを変更し、その中に境界線とマージンを追加します。欠点は、IE7 以前ではサポートされていないことです。したがって、適切に使用するには、IE 条件ステートメントを使用し、それらのブラウザーだけに css/js ハックを実装するのが最善です。

もう 1 つの解決策はフレックスボックス モデルですが、まだほとんどサポートされていません。しかし、一見の価値があります。任意のサイズのコンテナーを作成し、比率を使用してコンテナー内の子のサイズを変更したり、垂直または水平に簡単に配置したりできます。ボックス モデルの問題だけでなく、あらゆる種類の配置とセンタリングの問題も解決します。

于 2012-10-09T23:43:55.067 に答える
0

このようなものはどうですか？ブラウザのサイズに合わせて調整される、1つの内部に固定サイズの別のDivコンテナを追加します。次に、＃footerのコメント付きコードを使用して、背景を拡大できます。divサイズを作成するときは、マージン、パディング、および境界線に注意する必要があります。

すべてのピクセルが重要です;）

これが役立つことを望む人は誰でも！下部にあるjsFiddleへのリンク

#footer {
    background: black

    /* This would be your Background Image code for whole Footer.
    background: url(FOOTER IMAGE) no-repeat center center fixed;             
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
   */

    padding-right: 15px;
    position: relative;
    min-height: 250px;
    text-align: center;
    width:100%;
    margin-left:auto;
    margin-right:auto;
} /*IE6*/
#footerContainer {
    width:940px;
    height:250px;
    display:block;
}

#footer dl {
    display:inline-block;        
    background: black;
    float: left;
    text-align: left;
    margin: 0px;
    padding: 10px 0 5px 10px;
    width: 224px; /* Take into account the 1px Border & padding*/
    height:inherit;
    border-left: 1px solid white;
}

このようなもの：http：//jsfiddle.net/GFargo/eLzPk/1/

于 2012-10-09T23:55:55.960 に答える
0

ACJが述べたように：

境界線の幅 (1 ピクセル) が幅に追加されるため、25% の 4 倍に 4 ピクセルを加えた値は常に 100% を超えます。

これを解決するには、いくつかの設定値を定義することをお勧めします。

幅（1px）、そのタイプ（実線）を定義したが、欠落していたため（色）、省略形の境界線プロパティが機能していませんでした。

HTML5 でも作業している場合は、タグも使用できます...

大まかに、いくつかの調整を加えて: http://jsfiddle.net/eLzPk/8/

于 2012-10-10T00:04:53.220 に答える