15

我需要在左、中、右对齐的页脚容器 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 页面上所见。

4

3 回答 3

21

首先，您应该定位出现在 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;
  ...
}
于 2012-05-29T18:12:26.877 回答
1

这是位置、尺寸和错误的 CSS 声明的问题。

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

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

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;
    }
于 2012-05-30T23:08:45.170 回答
0

您的页脚容器为 960 像素。您的左右元素是 300 像素，但您没有为中间元素指定宽度，因此它默认为其父元素的全宽，它会自行将自己推到新行。

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

http://jsfiddle.net/y8e4T/

http://jsfiddle.net/y8e4T/show

#footerMidPane{
    width: 340px;
    float: left;
    padding: 10px;
}​
于 2012-05-29T19:29:25.193 回答