如何將3個DIV相鄰排列？

我需要在左側，中間和右側對齊的頁腳容器DIV中創建3個DIV。我見過的所有CSS示例都像我一樣使用了浮動。但是，由於某些原因，DotNetNuke不能正確解析CSS。我發現左窗格正確地浮動，但右窗格和中窗格正好位於其下方，而不是旁邊。下面是從我的ascx文件中的一個片段：如何將3個DIV相鄰排列？

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

我應該對上面什麼樣的變化達到理想的佈局？

更新：我試過建議的更改，但佈局仍然不能正常工作，如this salesandoperationsplanning.net page that demonstrates what I want所示。

來源

2012-05-29 SidC

我見過秩序的事情，主要是在IE瀏覽器。通常情況下，正確，左側，然後中間讓我想要跨瀏覽器的結果。 – cHao

我想說的是，有些東西正在改變'＃footer'的寬度，這就是爲什麼中間和下面的移位。你可以將顏色應用到'＃頁腳'並確認？ – jackJoe

正如我從你的CSS引導自己，並沒有把注意力放在你的HTML上，我們並沒有把它本身作爲目標。我更新了代碼來模仿你的HTML結構。 – Alma

首先，您應該定位出現在HTML中的元素的名稱。看起來你的CMS追加了某種preffix，而你的ID不匹配。（你有#footerleftpane，但它呈現爲#dnn_footerleftpane）

另外，由於您使用的是固定寬度的容器，因此沒有將寬度傳遞給中間容器時產生的麻煩。給它一個寬度，看看它是否工作。如果沒有，你可以嘗試兩種方法，如果你的塊的源順序是正確的（左，中，右）。

您可以將它們全部左移，確保其寬度和填充符合容器。

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

您可以使用display：inline-block的，也確保以適應在容器上的寬度和補白

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

來源

2012-05-29 18:12:26 Alma

您的頁腳容器960個像素。你的左邊的&右邊的元素是300像素，但你沒有爲你的中間元素指定寬度，所以它默認爲它的父元素的全部寬度，它自己將自己推到一個新行。

減去填充和中間元素不能超過340像素。

http://jsfiddle.net/y8e4T/

http://jsfiddle.net/y8e4T/show

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

來源

2012-05-29 19:29:25 Sparky

我將上面的內容添加到元素，但這似乎沒有辦法。還有什麼我應該修改？ – SidC

@SidC，我不能說。我把你的代碼發佈出來了[並且讓它做你所問的問題]（http://jsfiddle.net/y8e4T/）。 [您的實際代碼]（http://salesandoperationsplaningning.net/）與您發佈的內容不同嗎？當你查看[你的頁面]（http://salesandoperationsplanning.net/）上的代碼時，你可以看到'id'與你在CSS中使用的'id'不同。 – Sparky

我已經編輯了我的答案，只是因爲這種差異，cms似乎給ID添加了一個前綴 – Alma

它的位置，尺寸和錯誤的CSS聲明的問題。

1）position 您的頁面源代碼中有正確的中間窗格！

2）尺寸我做了一個快速測試，你可以進一步調查，但300px是太多的側窗格的寬度。內容中的東西可能會改變寬度。 DotNetNuke（實際上所有的ASP.Net控件）都呈現服務器端控件（聲明爲runat =「server」）爲它們分配一個唯一的id，因此你希望在你的css中使用#footerleftpane ，將成爲#dnn_footerleftpane。

只是repositiong你中間窗格......在其他兩個中葉以後，修改你的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-30 23:08:45 Trapias

很好的答案。我結束了使用CSS類來解決這個問題，而不是ID。 – SidC

如何將3個DIV相鄰排列？

回答

相關問題