4

これは簡単な質問ですが、正確な出力を得るのに苦労しています。フッターの div 内に 3 つの div を配置する必要があります。私はグーグルで多くのことを試しましたが、以前にも働いていました。しかし、フッターの固定位置では正確に機能しません。ここに画像の説明を入力

その画像では、フッター、赤 - 左、緑 - 右、および中央の白いコンテナ div です。

ここに私のCSSがあります:

div .footer-container
{
    height:53px;
    width:100%;
    position:fixed;
}

div .footer-container div .footer-left
{
    background-color:#f00;
    float:left;
    width:33%;
    height:31px;
}

div .footer-container div .footer-right
{
    background-color:#0f0;
    float:right;
    width:33%;
    height:31px;
}

div .footer-container div .footer-center
{
    background-color:#f0f;
    margin:0 auto;
    height:31px;
    width:33%;
}

ここにHTMLがあります：

<div data-role = "footer" class="footer-container">
                <div>
                <div class="footer-left"></div>
                <div class="footer-right"></div>
                <div class="footer-center"></div>
                </div>
            </div>

何が間違っていますか？説明してください。

4

5 に答える 5

3

すべてのフロートを取り除きます。Display: inline-block を 3 つの内部 div のそれぞれに追加し、横に収まるように幅を (32% に) 調整します。

    div .footer-container {    
        height:53px;     
        width:100%;     
        position:fixed; 
        background:#ccc 
    } 
    div .footer-container div .footer-left {     
        background-color:#f00;     
        display: inline-block;     
        width:32%;     
        height:31px; 
    } 
    div .footer-container div .footer-right {     
        background-color:#0f0;     
        display: inline-block;     
        width:32%;     
        height:31px; 
    } 
    div .footer-container div .footer-center {    
        background-color:#f0f;   
        display: inline-block;  
        margin:0 auto;     
        height:31px;     
        width:32%; 
    }​

ここにフィドルがあります

于 2012-12-07T13:43:33.527 に答える
0

float：leftを使用する

これが私のコードです

<div style="width:100%; background-color:#FF6600">

<div style="width:33%; background-color:#FF1100; float:left">div1</div>
<div style="width:33%; background-color:#FF6655; float:left">div2</div>
<div style="width:33%; background-color:#FF3333; float:left">div3</div>

</div>

これは機能するはずです、uは幅の1％を失いますが、それは私にとってはうまく機能します..色は3つの異なるdivを見るだけです..uはそれをcss..rightに入れることができますか？

于 2012-12-07T13:53:28.433 に答える
0

これは、中央の div にフロートがないためです。

このコードを div .footer-container div .footer-center に追加します

float: left or float:right
于 2012-12-07T13:51:23.233 に答える
0

フロートを左右から外し、コンテナ内に完全に配置します。これは、画像が示していることを達成したいと考えていることを前提としています。3つすべてを並べてCSSが正常に機能するようにする場合は、名前からクラス名以外のすべてを削除するだけです(以下にあるように)

http://jsfiddle.net/calder12/rnjtb/2

.footer-container
{
height:53px;
width:100%;
position:fixed;
}

.footer-left
{
background-color:#f00;
width:33%;
height:31px;
position:absolute;
bottom:0;
left:0;
}

.footer-right
{
background-color:#0f0;
width:33%;
height:31px;
position:absolute;
bottom:0;
right:0;
}

.footer-center
{
background-color:#f0f;
margin:0 auto;
height:31px;
width:33%;
}   ​
于 2012-12-07T13:58:32.237 に答える
0

中央の div も左にフロートさせます。それでも問題が解決しない場合は、3 つの子 div にプロパティposition:relativeorを指定しposition:staticます。

それでも問題が解決しない場合は、HTML コードに問題があると思われます。

于 2012-12-07T13:32:50.617 に答える