如何将3个DIV彼此对齐？

Question

我需要在一个左,中,右对齐的页脚容器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;
}

我应该对上面做出哪些改变才能达到理想的布局？

更新:我尝试了建议的更改,但布局仍然无法在此salesandoperationsplanning.net页面上看到,它展示了我想要的内容.

Answer 1

首先,您应该定位HTML中出现的元素的名称.看起来您的CMS附加了某种预加密,并且您的ID不匹配.(你有#footerleftpane,但它呈现为#dnn_footerleftpane)

此外,当您使用固定宽度的容器时,不会将宽度传递给中间容器所产生的麻烦.给它一个宽度,看它是否有效.如果不是,您可以尝试另外两种方法,如果您的块具有正确的源顺序(左,中,右).

1. 您可以将它们全部浮动,确保其宽度和衬垫适合容器.

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

2. 您可以使用display:inline-block,同时确保容纳您的宽度和填充

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