如何对齐3 DIV彼此相邻？ [英] How to Align 3 DIVs next to each other?

问题描述

我需要在页尾容器DIV中创建3个左对齐，中对齐和右对齐的DIV。我看到的所有CSS示例使用浮动，因为我做了。但是，由于某种原因DotNetNuke没有正确解析CSS。我发现左窗格正确浮动，但右和中间窗格位于紧靠其下面，而不是旁边。以下是我的ascx文件中的代码段：

 < div id =footer> 
< div id =footerleftpanerunat =server> 
< dnn：LOGO id =dnnLogorunat =server/> 
< h3>提高业绩。< / h3> 
< h3>实用销售和运营计划< / h3> 
< h3>适用于中型企业。< / h3> 
< / div> 
< div id =footerRightPanerunat =server> 
< dnn：COPYRIGHT id =dnnCopyrightrunat =server/>< br /> 
< dnn：PRIVACY id =dnnPrivacyrunat =server/> 
< dnn：TERMS id =dnnTermsrunat =server/> 
< / div> 
< div id =footerMidPanerunat =server> 
< / div> 
< / div> 
  

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

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

我应该对上面做什么更改以实现所需的布局？ >

更新：我尝试了建议的更改，但布局仍然无法正常工作，如此salesandoperationsplanning.net页面上所示我想要的。

解决方案

首先，您应该定位HTML中出现的元素的名称。看起来您的CMS附加某种前缀，并且您的ID不匹配。 （你有#footerleftpane，但它渲染为#dnn_footerleftpane）

此外，因为你使用固定宽度的容器，没有使用不通过宽度到中间容器。给它一个宽度，看看它是否工作。如果没有，你可以尝试两个方法，如果你的块是正确的源顺序（左，中心，右）。

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

     #dnn_footerleftpane， dnn_footerMidPane，＃dnn_footerRightPane {
    width：300px; 
    float：left; 
    .... 
   } 
     




2.   #dnn_footerleftpane，#dnn_footerMidPane，#dnn_footerRightPane {
    .... 
    display：inline-block; 
    ... 
   } 
     

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 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:

#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.

解决方案

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)

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).

1. 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;
     ....
   }
   

2. 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;
     ...
   }
   

这篇关于如何对齐3 DIV彼此相邻？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！