如何将3个DIV彼此对齐？

I'm needing to create 3 DIVs in a footer container DIV that are aligned left, middle and right. All the CSS examples I've seen make use of floats as I've done. However, for some reason DotNetNuke is not parsing the CSS correctly. I'm finding that the left pane is floating correctly, but the right and middle panes are positioned immediately below it instead of next to it. Here's a snippet from my ascx file:

我需要在页脚容器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>

Here's the relevant portion of my CSS file:

这是我的CSS文件的相关部分:

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

What changes should I make to above to achieve the desired layout?

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

Update: I tried suggested change but the layout is still not working as seen on this salesandoperationsplanning.net page that demonstrates what I want.

更新:我尝试了建议的更改,但布局仍然无法正常显示在此salesandoperationsplanning.net页面上,该页面演示了我想要的内容。

3 个解决方案

#1

First of all, you should target the names of the elements that appear in your HTML. Looks like your CMS appends some sort of preffix and your ids doesn't match. (You have #footerleftpane but it renders as #dnn_footerleftpane)

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

Also, as you are using a fixed width container there is no use to the troubles generated by not passing a width to the middle container. Give it a width and see if it works. If it doesn't you can try two more methods, if your blocks are in the correct source order (left, center, right).

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

You can float them all left, making sure its widths and paddings fit on the container.

您可以将它们全部浮动,确保其宽度和衬垫适合容器。
```
#dnn_footerleftpane, #dnn_footerMidPane, #dnn_footerRightPane {
  width: 300px;
  float: left;
  ....
}
```
You can use display: inline-block, also making sure to fit your widths and paddings on the container

您可以使用display:inline-block,同时确保在容器上适合您的宽度和填充
```
#dnn_footerleftpane, #dnn_footerMidPane, #dnn_footerRightPane {
  ....
  display: inline-block;
  ...
}
```

#2

it's a matter of positions, dimensions and wrong css declarations.

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

1) position You have the mid pane after the right one in your page source!

1)位置您在页面源中的右侧窗格后面有中间窗格!

2) dimensions I made a quick test and you can investigate further, but 300px is too much for the width of side panes. Something in content probably modifies width.

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

3) css declarations DotNetNuke (actually all ASP.Net controls do) renders server-side controls (declared as runat="server") assigning them an unique id, thus what you expect to be #footerleftpane in your css, will be #dnn_footerleftpane.

3)CSS声明DotNetNuke的(实际上所有ASP.Net控制做)使服务器端控件(声明为RUNAT =“服务器”)给它们分配一个唯一的ID,这样你所期望的在你的CSS要#footerleftpane,将#dnn_footerleftpane 。

After repositiong your middle pane just... in the middle of the other two, modify your css like this:

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

#3

Your footer container is 960 pixels. Your left & right element are 300 pixels but you have not specified a width for your middle element, so it defaults to the full width of its parent, which pushes itself to a new line all by itself.

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

Subtract the padding and the middle element can't be wider than 340 pixels.

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

http://jsfiddle.net/y8e4T/

http://jsfiddle.net/y8e4T/show

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

#1