Css 如何将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>

我应该对上述内容进行哪些更改以实现所需的布局

---

更新：我尝试了建议的更改，但布局仍无法如上所示正常工作。

首先，您应该以HTML中显示的元素名称为目标。看起来您的CMS附加了某种预修复，而您的ID不匹配。（您有#footerleftpane，但它呈现为#dnn#footerleftpane）

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

你可以把它们都放在左边，确保它的宽度和衬垫适合容器

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

您可以使用display:inline块，还可以确保在容器上适合您的宽度和填充

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

---

您的页脚容器为960像素。您的left和right元素是300像素，但您没有为中间元素指定宽度，因此它默认为其父元素的全宽度，这会将自身推到一条新行

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

---

这是位置、维度和错误的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;
    }

---

我已经看到顺序的重要性，主要是在IE中。通常是右、左、中，然后通过浏览器得到我想要的结果。我想说的是有什么东西在改变

#页脚的宽度，这就是为什么中间和右下方会移动。你能给
#页脚
涂上颜色并确认一下吗？因为我从你的CSS开始引导自己，几乎没有注意到你的HTML，所以我们不是针对它本身的元素。我已经更新了代码来模拟您的HTML结构。我将上述内容添加到元素中，但这似乎没有起作用。还有什么我需要修改的吗？@SidC，我不能说。我把你发的代码拿走了。与您发布的内容不同吗？当您查看上的代码时，您可以看到
id
与您在CSS中使用的
id
不同。我编辑了我的答案，正是因为这种差异，cms似乎为idsGreat答案添加了前缀。我最终用CSS类而不是ID来解决这个问题。
#footerMidPane{
    width: 340px;
    float: left;
    padding: 10px;
}​

    #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;
    }