Как сжать и центрировать контейнер, сохраняя его содержимое влево?

Question

У меня возникли проблемы с макетом страницы и я бы очень хотел помочь. Вот что я хотел:

Если ширина браузера уменьшается, то третий серый ДИВ должен упасть вниз (форсирует последний падать вниз, а), в результате чего в этом:

Таким образом, зеленый контейнер должен отображать как можно больше серых внутренних контейнеров, сокращая его ширину и сохраняя центрирование.

Мой текущий код близок к тому, что я хочу, поскольку серые divs выпадают при изменении размера страницы, но проблема в том, что серые divs центрированы (выравнивание их друг от друга в нижней строке), что делает вывод выглядит следующим образом:

в то время как я хотел, чтобы она выглядела так:

JSFIDDLE: http://jsfiddle.net/2S7gz/5/

Как это можно сделать?

Текущий HTML:

<div class="body"> 
    <div class="outerContainer"> 
     <div class="innerContainer"> 
      inner container 
     </div> 

     <div class="innerContainer"> 
      inner container 
     </div> 

     <div class="innerContainer"> 
      inner container 
     </div>  

     <div class="innerContainer"> 
      inner container 
     </div> 

     <div class="innerContainer"> 
      inner container 
     </div> 
    </div> 
</div> 

CSS:

.body { 
    background-color: #fee; 
    text-align: center; 
    padding: 25px; 
} 

.outerContainer { 
    background-color: #efe; 
    display: inline-block; 
} 

.innerContainer { 
    display: inline-block; 
    width: 200px; 
    height: 200px; 
    margin: 10px; 
    background-color: #f1f1f1; 
} 

Answer 1

Я сдвинуты несколько вещей вокруг. Это нормально? В основном я сменил контейнер div на элемент span и дал ему фиксированную ширину. (Вы упомянули, что ящики всегда будут одинаковой ширины)

Вот jsfiddle.

EDIT: Here Я сделал несколько дополнительных вещей.

Вы не можете маржировать: автоматически центрировать div, который имеет max-width и display:inline-block, но вы можете использовать text-align:center - который распознается всеми основными браузерами. Делая это, мы центрируем div, сохраняя целостность его текучести. Мы также избегаем использования таблиц. Если размер браузера слишком мал, меньшие divs будут «прыгать» вниз, и ваш контейнер будет изменять размер. Чтобы избежать центрирования всего текста, мы добавили text-align:left в outerContainer.

В принципе, ответ здесь text-align:center и max-width. Эта комбинация - это золото, которое вам нужно.

Answer 2

Это ... сложная проблема, потому что единственный способ постоянно обновлять внутреннее содержимое div после многочисленных изменений, вероятно, повлечет за собой решение JQuery или JavaScript. Однако, если вы просто хотите изменить размер ширины, пока содержимое остается несколько выровненным по своему усмотрению, то это может быть решением.

DEMO

Давайте посмотрим на CSS используется:

.outerContainer { 
    /* max-width: 100%; */ /* This can also be used */ 
    width: auto; /*creates that fluidity */ 
    margin: 25px; 
    background-color: #efe; 
    display: inline-block; 
} 

Глядя на мои комментарии выше, мы замечаем, что ширина авто. MDN указывает, что авто означает 'The browser will calculate and select a width for the specified element.'. Это полезно, потому что это позволит предположить, что вам больше не нужна фиксированная ширина.

Я также сделал небольшое центрирование, используя display: table-cell;, который позволяет div действовать как тип td, который, будучи партнером vertical-align:middle;, будет центрировать все в коробке соответственно. Это можно найти в вашем внешнем div, который вам удобно назвать «тело».

Я также могу сказать вам, что есть, вероятно, решение для JavaScript, которое сможет повторно использовать все, поскольку div растет или сжимается (без увеличения или уменьшения или наоборот), и это работает, потому что JavaScript - это браузер или клиент- что означает, что он позволит обновлять браузер, не отправляя сигнал на сервер и обновляя страницу (в отличие от других языков, таких как Perl, Ruby или Php).

С учетом сказанного вам может потребоваться найти решение JavaScript для повторного включения всего в div (если это ваша главная цель), но с чистым CSS, это так же хорошо, как и без каких-либо положений внутренних делений.

Мое последнее примечание состоит в том, что позиционирование относительно ... опасно из-за того, что он может непрерывно продолжать движение после того, как окно приближается и уходит. Если вы хотите, чтобы вещи оставались абсолютно неподвижными или несколько близкими к этому, я бы посоветовал использовать переменную float для хранения вещей или обеспечения того, чтобы все было на месте и использовалось другое определение MDN, в котором говорится, что все левые поплавки must float on the left side of its containing block и все правые поплавки must float on the right side of its containing block.