1

それで、以前から手伝ってもらっていたのですが、整理整頓が行き届いておらず、何をしているのかわかりにくかったです。ここで私を置き去りにしました、私は垂直方向の配置を持っていますが、何らかの理由でフッターが途中で途切れ、ソーシャルアイコンは右に配置/フローティングされているはずなのに、パワードバイのすぐ横にとどまります...

http://jsfiddle.net/4KDEM/

HTML

<div id="footer">
 <div id="footerContent">
 <div id="leftFooter">
 $POWERED_BY$
 </div>
 <div id="rightFooter">
 <a href="#"><img src="http://zevoxa.com/images/social/facebook.png" /></a>
 <a href="#"><img src="http://zevoxa.com/images/social/twitter.png" /></a>
 <a href="#"><img src="http://zevoxa.com/images/social/youtube.png" /></a>
 <a href="#"><img src="http://zevoxa.com/images/social/deviantart.png" /></a>
</div>
</div>
</div>

CSS

#footer {
 background-image:url('/images/footer_bg.png');
 bottom repeat-x;
 height: 110px;
 display:table-cell;
 vertical-align: middle;
}
#footerContent {
 display:table;
 width:100%;
}
#leftFooter {
 float: left;
 font-family:maven;
 font-size: 15px;
 padding-left: 20px;
}
#rightFooter {
 float: right;
 text-align:right;
}
4

2 に答える 2

2

次のように CSS を調整することで、レイアウトを修正できます。

#footer {
    background-image:url('http://zevoxa.com/images/footer_bg.png');
    bottom repeat-x;
    width:100%;
    height: 110px;
}
#footerContent {
    display:table;
    width: inherit; /* You can adjust this depending on other design factors*/
    height: inherit;
}
#leftFooter {
    display:table-cell;
    vertical-align: middle;
    font-family:maven;
    font-size: 15px;
    padding-left: 20px;
    border: 2px dotted yellow; /* just to show where the edges are*/
}
#rightFooter {
    display:table-cell;
    vertical-align: middle;
    text-align:right;
    border: 2px dotted yellow;
}

フィドルを参照してください: http://jsfiddle.net/audetwebdesign/Pfrj8/

高さを親要素 ( ) に設定#footerContentして継承します。必要に応じて、さまざまな方法で幅を設定できます。私の例では、全幅のデフォルトの動作に設定しています。display: table#footer

2 つの子要素について、表示タイプをtable-cellとに設定するとvertical-align: middle、すでに text-align が適切に設定されています。デフォルトでは、2 つのセルは同じサイズで、親の幅の 50% になります。

フロートは必要ありません。

さておき

他の目的 (追加の背景画像など) で 2 番目の div が必要#footerでない限り、2 つのラッパーは必要ないかもしれません。#footerContent設計の他の要因に依存します。(フィドルの 2 番目の例を参照してください。)

于 2013-05-15T01:33:22.727 に答える
-1

サイトがレスポンシブ サイトでない場合は、次のように幅を追加するだけです。#footer {width:500px;}

于 2013-05-15T01:34:51.363 に答える