css footer - 2つの列に分割しようとしています

左揃えと右揃えのテキストがあるようにフッターを分割しようとしています。私は、次のしているが、2つの要素が次々に表示されていますcss footer - 2つの列に分割しようとしています

#footer { 
    clear: both; 
    background-color: #330066; 
    padding: .5em; 
    font-size: 0.8em; 
    color: #fff; 
} 

#footer p .left { 
    text-align:left; 
    float:left; 
} 

#footer p .right { 
    float:right; 
    text-align:right; 
} 


<div id="footer"> 
    <p class="left"> 
     Copyright © 2009 
    </p> 
    <p class="right"> 
     Designed by xxxxxx 
    </p> 
</div>

私は確信しているが、私はちょうど働いてそれを得ることができない、本当に簡単であるべき - 誰がどんなアドバイスをしてください提供することができますか？

ヘレン

出典

2009-05-15 Helen

なるほど私が正しく仮定http://stackoverflow.com/questions/867587/css-footer-trying-！ 2列に分割する/ 867599＃867599 –

私の答えを確認してください： http://stackoverflow.com/questions/1844207/how-to-make-a-div-to-wrap-two-float- 。のdiv-内部/ 1844291動作するはずです＃1844291あなたのポストのための – lepe

おかげで（スペース文字を注意してください）あなたがfooter p .rightなくfooter p.rightを使用している50％例えば、あなたは左と右のために幅を設定しようとした各

出典

2009-05-15 08:39:07 bumperbox

を持っています。つまり、.rightクラスと.leftクラスは段落に適用されませんが、段落内の子孫要素に適用されます。 CSSが失敗する原因となるタイプミスの可能性もあります。

ここでHTMLをコピーしてください。

編集：私はあなたが今、あなたのHTMLを掲載しました参照してください。私の前提は正しかった。 pと.left/.rightの間のスペースを取り除きます。とにかく段落を浮動させる場合は、text-alignプロパティを省略できます。

#footer p.left { float: left; } #footer p.right { float: right; }

編集：あなたのコメントに応えて：それは動作するはずです。ここで少しテストケースです：

<!DOCTYPE html> <html lang="en"> <head> <title>Test case for the CSS footer problem</title> <style> #footer { width: 300px; outline: 1px solid red; } #footer p.left { float: left; } #footer p.right { float: right; } </style> </head> <body> <p>See <a href="http://stackoverflow.com/a/867599/96656" title="Stack Overflow: CSS footer; trying to split into two columns">http://stackoverflow.com/a/867599/96656</a> for details. <div id="footer"> <p class="left">Copyright © 2009</p> <p class="right">Designed by xxxxxx</p> </div> </body> </html>

出典

2009-05-15 08:39:58

おかげで、私が今持っているので、提案されているようコードをコピーし #footer { \tクリア：両方; \t背景色：＃330066; \tパディング：0.5em; \t font-size：0.8em; \t色：＃000; } #footer p.left { \t float：left; } #footer p.right { \t float：right; } （htmlはまだ投稿と同じです）これはフッタの下のテキストを表示しますか？ – Helen

あなたのコメントに応じて自分の投稿を編集しました。 –

あなたは正しいですが、これはうまくいきますが、IE8ではありません。互換性モードで実行すると、フッタは枠内のテキストでOKを表示しますが、IE8モードではフッターdivの下にテキストが表示されます。 – Helen

段落がブロックレベル要素であるため、あなたが並べて表示されるように、それらを希望する場合は、あなたが山車を削除し、インラインであることにそれらを設定する必要があります。

footer p.left {text-align:left; display:inline; } 
footer p.right {text-align:right; display:inline; }

も#footerか.footerのどちらかになるはずですか？

出典

2009-05-15 08:44:15 Sliff

問題は、#footerには、すべてのフロートを殺すclear: both;があるという問題です。

あなたが持っている場合、それは良いだろう：

#footer { 
    background-color: #330066; 
    padding: .5em; 
    font-size: 0.8em; 
    color: #fff; 
    width: 100%; 
    overflow: hidden; 
} 

p.left { float: left; } 
p.right { float: right; }

width: 100%;と、彼らが行われた後、それは浮動小数点数をクリアしてoverflow: hidden;は、あなたの問題を解決します。

<div id="footer"> 
    <p class="left">Copyright &copy; 2009</p> 
    <p class="right">Designed by ****</p> 
</div>

出典

2009-05-15 08:51:22 janhartmann

明らかに削除する必要はありません：あなたが持っているだけのことができるようになります上記のコードでは

両方#footerの前に提案されているよう。マティアス・ビーネンは、「p。」の代わりに「p.left」と書かなければなりません。「左次の2つの段落の後のようなもので終わるの両方をクリアする必要があります！

#footer { 
    clear: both; 
    background-color: #330066; 
    padding: .5em; 
    font-size: 0.8em; 
    color: #fff; 
} 

#footer p.left { 
    text-align:left; 
    float:left; 
} 

#footer p.right { 
    float:right; 
    text-align:right; 
} 


<div id="footer"> 
    <p class="left"> 
     Copyright © 2009 
    </p> 
    <p class="right"> 
     Designed by xxxxxx 
    </p> 
    <div style="clear:both"></div> 
</div>

出典

2009-05-15 09:06:52 Daniel

css footer - 2つの列に分割しようとしています

答えて

関連する問題