使浮動的div填充整個父寬度

在我的頁面上，我需要橫向顯示10個框。每個框的最小寬度爲150px，最大寬度爲299px。頁面應該儘可能多地放入盒子，而不會留下任何空白，每個盒子都有相同的寬度（由於舍入，如果需要，可以擴展一個像素）。使浮動的div填充整個父寬度

示例：如果頁面寬度爲660px，則應使用165px寬度的4個框。如果頁面寬度爲600px，則應使用150px寬度的4個框。如果寬度爲597px，則應使用199px的3個框，因爲框不能小於150px。

底部的其他盒子應該與上面的相同寬度。

我該如何完成上述操作？

注箱行是如何離開的權利差距。

使用如下代碼（因爲我被迫）

<body> 
<div id="mainPage"> 
    <div id="bar">Width of a row of boxes should match the length of this bar.</div> 
    <div id="capTable"> 
     <div class="cap" id="cap0"> 
      <img class="capImage"> 
      <input type="text"> 
     </div> 
     <div class="cap"> 
      <img class="capImage"> 
      <input type="text"> 
     </div> 
     <div class="cap" id="cap2"> 
      <img class="capImage"> 
      <input type="text"> 
     </div> 
     <div class="cap"> 
      <img class="capImage"> 
      <input type="text"> 
     </div> 
     <div class="cap" id="cap4"> 
      <img class="capImage"> 
      <input type="text"> 
     </div> 
     <div class="cap"> 
      <img class="capImage"> 
      <input type="text"> 
     </div> 
     <div class="cap" id="cap6"> 
      <img class="capImage"> 
      <input type="text"> 
     </div> 
     <div class="cap"> 
      <img class="capImage"> 
      <input type="text"> 
     </div> 
     <div class="cap" id="cap8"> 
      <img class="capImage"> 
      <input type="text"> 
     </div> 
     <div class="cap"> 
      <img class="capImage"> 
      <input type="text"> 
     </div> 
    </div> 
</div>

body 
{ 
    background-color:black; 
} 

.cap 
{ 
    background-color: red; 
    float: left; 
    height: 150px; 
    max-width: 299px; 
    min-width: 150px; 
} 

.capImage 
{ 
    background-color:blue; 
    float: left; 
    height: 37px; 
    width: 37px; 
} 

#bar 
{ 
    background-color: orange; 
} 

#cap0, #cap2, #cap4, #cap6, #cap8 
{ 
    background-color: green; 
} 

#mainPage 
{ 
    margin: 0 auto; 
    max-width: 800px; 
    min-width: 150px; 
}

我已經試過這與表，但也遇到了同樣的問題，以及許多不同花車和顯示器的組合，以及溢出。

我相信我可以通過在CSS中手動指定不同的分辨率來做到這一點。但如果可能的話，更自動化的方法將是首選。

我只想使用JavaScript作爲最後的手段。我應該能夠自己做。

謝謝。

來源

2014-01-23 user3227505

你實際上應該制定一個問題。 – wonko79

看起來好像很容易確定，但我已經添加了它。謝謝。 – user3227505

看起來你正在試圖提供一個響應式佈局，並且你很難弄清楚它是如何完成的。我發現使用％寬度是最乾淨的解決方案，所以您可以有25％的寬度div，然後使用媒體響應將它們更改爲50％。如果這沒有意義，那麼請嘗試查看一些良好響應式框架的示例。我使用http://www.responsivegridsystem.com/ – 2ne

我已將您的.cap div更改爲使用％寬度代替px，以便更輕鬆地獲得響應式佈局。

DEMO

主要CSS變化

.cap 
{ 
    background-color: red; 
    float: left; 
    height: 150px; 
    width: 25%; 
    min-width: 150px; 
} 

@media only screen and (max-width: 1024px) { 
    .cap { 
     width: 50%; 
    } 
}

來源

2014-01-23 13:26:52 2ne

看起來這將是我的情況最合適的方法，並且這將工作正常。謝謝。希望有一天我們可以擁有比HTML/CSS更好的東西。 – user3227505

使浮動的div填充整個父寬度

回答

相關問題