Question

我需要在页脚容器DIV中创建3个DIV，这些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;
}

我应该对上面的内容进行哪些更改才能实现所需的布局？

更新：我尝试了建议的更改，但布局仍然无法正常显示this salesandoperationsplanning.net page that demonstrates what I want。

Answer 1

首先，您应该定位HTML中显示的元素的名称。看起来您的CMS附加了某种预加密，并且您的ID不匹配。（你有#footerleftpane，但它呈现为#dnn_footerleftpane）

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

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

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

您可以使用display：inline-block，同时确保容纳您的容器宽度和填充

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

Answer 2

这是位置，维度和错误的CSS声明的问题。

1）位置您的页面源中的右侧窗格后面有中间窗格！

2）尺寸我做了一个快速测试，你可以进一步调查，但300px对于侧窗格的宽度来说太多了。内容中的某些内容可能会修改宽度。

3）css声明 DotNetNuke（实际上所有ASP.Net控件都这样做）渲染服务器端控件（声明为runat =“server”），为它们分配一个唯一的id，因此你期望在你的css中#footerleftpane是#dnn_footerleftpane。

重新定位中间窗格后......在其他两个中间，修改你的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;
    }

Answer 3

您的页脚容器为960像素。你的左派＆amp;右边的元素是300像素，但是你没有为中间元素指定宽度，所以它默认为其父级的全宽，它将自己全部推送到一个新的行。

减去填充，中间元素不能超过340像素。

http://jsfiddle.net/y8e4T/

http://jsfiddle.net/y8e4T/show

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

如何将3个DIV彼此对齐？

3 个答案: