web-dev-qa-db-ja.com

3つのDIVを並べて配置する方法

左、中央、右に配置されたフッターコンテナーDIVに3つのDIVを作成する必要があります。私が見たすべてのCSSの例では、これまでどおりフロートを使用しています。ただし、何らかの理由でDotNetNukeはCSSを正しく解析していません。左ペインが正しくフローティングしているのがわかりますが、右ペインと中央ペインは隣ではなく、すぐ下に配置されています。これが私のascxファイルからの抜粋です：

<div id="footer">
<div id="footerleftpane" runat="server">
    <dnn:LOGO id="dnnLogo" runat="server" />
    <h3>Driving business performance.</h3>
    <h3>Practical Sales and Operations Planning</h3>
    <h3>for medium sized businesses.</h3>
</div>
<div id="footerRightPane" runat="server">
    <dnn:COPYRIGHT id="dnnCopyright" runat="server" /><br />
    <dnn:PRIVACY id="dnnPrivacy" runat="server" />
    <dnn:TERMS id="dnnTerms" runat="server" />
</div>
<div id="footerMidPane" runat="server">
</div> 
</div>

これが私のCSSファイルの関連部分です：

#footer
{
width: 960px;
border: 1px;
}
#footerleftpane
{
width: 300px;
float: left;
}
#footerRightPane
{
width: 300px;
float: right;
}
#footerMidPane
{
padding:10px;
}

目的のレイアウトを実現するには、上記のどの変更を行う必要がありますか？

更新：提案された変更を試してみましたが、レイアウトはまだ機能していません このセールスアンドオペレーションプランニング.netのページで、私が何を望んでいるかを示しています 。

cssdotnetnukeskinning
11
SidC

まず、HTMLに表示される要素の名前をターゲットにする必要があります。 CMSがなんらかの接頭辞を付加していて、IDが一致していないようです。 （#footerleftpaneがありますが、＃dnn_footerleftpaneとしてレンダリングされます）

また、固定幅のコンテナーを使用しているため、中央のコンテナーに幅を渡さないことによる問題は発生しません。それに幅を与え、それが機能するかどうかを確認します。そうでない場合は、ブロックが正しいソース順序（左、中央、右）にある場合、さらに2つの方法を試すことができます。

  1. それらをすべて左にフロートして、幅とパディングがコンテナに収まるようにします。

    #dnn_footerleftpane, #dnn_footerMidPane, #dnn_footerRightPane {
  width: 300px;
  float: left;
  ....
}

  2. Display：inline-blockを使用することもできます。また、コンテナーの幅とパディングに合わせてください。

    #dnn_footerleftpane, #dnn_footerMidPane, #dnn_footerRightPane {
  ....
  display: inline-block;
  ...
}
18
Alma

これは、位置、寸法、および間違ったcss宣言の問題です。

1）位置あなたはあなたのページソースの正しいものの後に中枠を持っています！

2）寸法簡単なテストを行い、さらに調査できますが、300pxはサイドペインの幅に対して大きすぎます。コンテンツの何かがおそらく幅を変更します。

3）css宣言DotNetNuke（実際にはすべてのASP.Netコントロールが行います）は、サーバー側コントロール（runat = "server"として宣言）をレンダリングして一意のIDを割り当てます。したがって、CSSで#footerleftpaneであると予想されるものは、＃dnn_footerleftpaneになります。 。

中央のペインの位置を変更したら、他の2つの中央に、次のようにcssを変更します。

    #footer
    {
        width: 960px;
        height: auto;
        margin:0;
        padding:0;
        border: 0;
    }

    #dnn_footerleftpane, #dnn_footerRightPane{
        width: 290px;
        float: left;
    }

    #dnn_footerMidPane
    {
        width: auto;
        float: left;
    }
1
Trapias

フッターコンテナーは960ピクセルです。左と右の要素は300ピクセルですが、中央の要素の幅を指定していないため、デフォルトでその親の全幅に設定され、それ自体が新しい行にそれ自体をプッシュします。

パディングを差し引くと、中央の要素は340ピクセルを超えることはできません。

http://jsfiddle.net/y8e4T/

http://jsfiddle.net/y8e4T/show

#footerMidPane{
    width: 340px;
    float: left;
    padding: 10px;
}​
0
Sparky