如何使用「寬度自動」和「浮動」來對齊div？

我想在頁面左側有一個容器（帶有一些文字），，它自己調整自己的可用空間，以及右邊的2個側邊欄（我使用的是Wordpress）。（這兩個側邊欄與float工作正常。）所以我試圖在容器上width:auto。如何使用「寬度自動」和「浮動」來對齊div？

但它不適應其餘的可用空間（它佔用所有頁面寬度）。如果我將寬度設置爲70％，它適合索引頁面上的空間，但是如果我單擊某篇文章，我只剩下1個側邊欄，所以文本和側邊欄之間有一個空白區域。

你知道如何解決這個問題嗎？

#container { /* the text */ 
    overflow:auto; 
    width:auto; 
    position:relative; 
    float:left; 
} 

#primary { /* first sidebar */ 
    position:relative; 
    border:1px solid red; 
    float:right; 
    width:250px; 
} 


#second { /* second sidebar */ 
    border:1px solid red; 
    background:white; 
    width:250px; 
    height:auto; 
    float:right; 
    margin-left:15px; 
}

感謝

編輯：

比方說，我正在使用此，而不是WordPress的側邊欄：我仍然無法管理，使其工作，可能有人看看用這個簡單的代碼？還有就是2盒：綠色的和紅色的...

<!DOCTYPE> 
<html> 
    <head> 
     <meta charset="UTF-8" /> 
    </head> 
     <body> 

      <div style="position:relative; width:700px; margin:0 auto;"> 
       <div style="width:auto; border:1px solid green;">i would like to have a container (with some text) on the left of the page, that adapts itself with the space available, and 2 sidebars following on the right (i'm using Wordpress). (The 2 sidebars work fine with float.) So i tried width:auto on the container. 

But it does not adapt itself with the rest of the space available (it takes all the page width). If i set the width to 70%, it fits the space on the index page, but if i click on an article, i only have 1 sidebar left, so there is a blank space between the text and the sidebar.</div> 

<div style="width:20%; float:right; border:1px solid red;">blablabla</div> 
      </div> 

     </body> 
</html>

來源

2012-05-11 Paul

這樣做的一個非常簡單的方法是編輯文章的模板，因此當只有一個側邊欄時，容器有一個特殊的CSS。 – OptimusCrime

@OptimusCrime：謝謝，你能更具體嗎？我應該在html中使用「style =」屬性嗎？它會覆蓋的CSS文件？ – Paul

容器內的兩個側杆？ –

好吧，我發現了：把文字放在最後，用overflow：hidden和auto，然後float就在右邊的小容器上，謝謝你的回答。

來源

2012-05-14 02:01:02 Paul

寬度：汽車是默認值，所以它不會做什麼比一個DIV會做標準的其他任何東西，這是填充可用寬度，因爲它是塊級元素。浮動它時會發生變化，它將包裹其內容，因此可以是任何寬度，直到最大寬度。

我認爲你遇到的麻煩是混合百分比寬度和固定寬度。我可以看到你想要做什麼 - 有一個固定寬度的邊欄（或兩個），並且頁面的其餘部分是靈活的。在基於表格的佈局時間內做到這一點很容易，但我們不要去那裏！

聽起來像你想要一個流體佈局，但有2固定與列。可能值得看看這篇文章，看看是否有什麼東西適合你要做的事情：http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/

來源

2012-05-11 08:54:28 howard10

雖然這些天我通常會推薦一個基於網格系統的響應式佈局。各種設備的不同尺寸的彈性佈局效果良好。 – howard10

謝謝你的回答，它不會改變每個側欄上20％的任何內容，並且寬度：容器上的寬度，你會有其他想法嗎？ – Paul

如果你堅持所有百分比佈局，那麼你會做一些像容器：60％sidebar1：20％sidebar2：20％。寬度：auto不會爲你做任何事情，因爲它並不意味着'自動填充剩餘的空間'。它會導致容器填滿整個100％的寬度，並將側邊欄推下。 – howard10

在父div上使用display：table。然後顯示：孩子們的表格單元格。他們將按照他們在桌上的方式排列。

#container { /* the text */ 
    overflow:auto; 
    width:auto; 
    position:relative; 
    // float:left; 
    display: table-cell; 
    vertical-align:top; 
} 

#primary { /* first sidebar */ 
    position:relative; 
    border:1px solid red; 
    // float:right; 
    width:250px; 
    vertical-align:top; 
} 


#second { /* second sidebar */ 
    border:1px solid red; 
    background:white; 
    width:250px; 
    height:auto; 
    // float:right; 
    margin-left:15px; 
    display: table-cell; 
    vertical-align:top; 
}

來源

2016-04-14 21:06:51 chaiboy

http://codepen.io/jasonmcalpin/pen/qZoLQa – chaiboy

如何使用「寬度自動」和「浮動」來對齊div？

回答

相關問題