CSS 如何将 3 个 DIV 彼此对齐？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10804273/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to Align 3 DIVs next to each other?
提问by SidC
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。我见过的所有 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 页面所示，该页面展示了我想要的内容。
回答by Alma
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
#dnn_footerleftpane, #dnn_footerMidPane, #dnn_footerRightPane { .... display: inline-block; ... }
您可以将它们全部向左浮动，确保其宽度和填充适合容器。
#dnn_footerleftpane, #dnn_footerMidPane, #dnn_footerRightPane { width: 300px; float: left; .... }您可以使用 display: inline-block，同时确保在容器上适合您的宽度和内边距
#dnn_footerleftpane, #dnn_footerMidPane, #dnn_footerRightPane { .... display: inline-block; ... }
回答by Trapias
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) 尺寸我做了一个快速测试，你可以进一步调查，但 300 像素对于侧窗格的宽度来说太多了。内容中的某些内容可能会修改宽度。
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="server"），为它们分配一个唯一的 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;
}
回答by Sparky
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/show
http://jsfiddle.net/y8e4T/show
#footerMidPane{
width: 340px;
float: left;
padding: 10px;
}?
