Сделать плавающие divs заполнить всю родительскую ширину

На моей странице мне нужно отобразить 10 боксов по горизонтали. Каждая коробка имеет минимальную ширину 150 пикселей и максимальную ширину 299 пикселей. Страница должна содержать столько ящиков, сколько возможно на странице, не оставляя пробелов, причем каждая коробка имеет одинаковую ширину (при необходимости увеличивая пиксель за счет округления).Сделать плавающие divs заполнить всю родительскую ширину

Пример: Если ширина страницы составляет 660 пикселей, следует использовать 4 коробки шириной 165 пикселей. Если ширина страницы составляет 600 пикселей, следует использовать 4 короба шириной 150 пикселей. Если ширина 597px, следует использовать 3 коробки в 199px, так как ящик не может находиться под 150px.

Остальные коробки на дне должны иметь одинаковую ширину выше.

Как я могу выполнить вышеуказанное?

У меня есть скрипку здесь: http://jsfiddle.net/CD4f2/1/

Обратите внимание, как ряды коробок оставить зазор справа.

с использованием кода последующей (потому что я вынужден)

<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

Похоже, вы пытаетесь предложить отзывчивый макет, и у вас возникли проблемы с выяснением того, как это делается. Я считаю, что использование% widths является самым чистым решением, поэтому вы можете иметь 25% ширины div, а затем использовать медиа-ответ, чтобы изменить их на 50%. Если это не имеет смысла, попробуйте взглянуть на какой-то пример хорошо реагирующих фреймворков. Я использую http://www.responsivegridsystem.com/ – 2ne

У меня есть переменные .cap divs для использования% widths вместо 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

Сделать плавающие divs заполнить всю родительскую ширину

ответ

Смежные вопросы