Слева выровняйте дочерние элементы в центре с динамической шириной родителя

Question

Я не могу обернуть вокруг себя голову, а также сложно найти правильное решение в Интернете/здесь, поскольку это трудно сформулировать.

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

У меня нет проблем с достижением этой цели с помощью Isotope. Сцентрированная кладка отображает именно то поведение, которое я хочу. Если вы измените размер браузера, родительский div будет регулировать его ширину, а дочерние элементы будут перемещаться и «заполнить линию», оставаясь «центрированными». Но не «заполненная линия» останется левой.

Есть ли способ достичь точно такого же поведения (ну без анимации, которая является ^^) divs, без использования js или чего-нибудь еще? Надеюсь, это будет ясно, что я имею в виду. Заранее спасибо!

Answer 1

Я не знаю, правильно ли это закрыть этот вопрос, но я хотел бы поблагодарить всех, кто ответил на мой вопрос. Поэтому я думаю, что это невозможно создать только с помощью CSS. Запросы jQuery или Media необходимы для правильного поведения.

Вот как я, наконец, решен вопрос (с помощью JQuery на самом деле): http://jsfiddle.net/Ewtx2/

HTML

<div id='container'> 
<div id='outline'> 
    <div class='innerbox'></div> 
    <div class='innerbox'></div> 
    <div class='innerbox'></div> 
    <div class='innerbox'></div> 
    <div class='innerbox'></div> 
    <div class='innerbox'></div> 
    <div class='innerbox'></div> 
    <div class='innerbox'></div> 
    <div class='innerbox'></div> 
    <div class='innerbox'></div> 
    <div class='innerbox'></div> 
    <div class='innerbox'></div> 
    <div class='innerbox'></div> 
    <div class='innerbox'></div> 
</div> 
</div> 

CSS

#container { 
    width:100%; 
    text-align:center; 
    border: 1px red dashed; 
} 
#outline { 
    text-align: left; 
    font-size:0; 
    display: inline-block; 
    padding-left:5px; 
    padding-bottom:5px; 
    /* for ie6/7: */ 
    *display: inline; 
    border: 1px black dashed; 
    zoom:1; 
} 
.innerbox { 
    display:inline-block; 
    height:50px; 
    margin-top:5px; 
    margin-right:5px; 
    width:50px; 
    background:red; 
} 

JQuery

var boxAmount = 0; 
var newWidth = 0; 
setNewWidth(); 

$(window).resize(function() { 
    setNewWidth(); 
}); 

function setNewWidth() { 
    // get container width and check how many boxes fit into it (account margin/padding) 
    boxAmount = ($('#container').width() - 5)/($('.innerbox').width() + 5); 
    boxAmount = Math.floor(boxAmount); 
    // multiply the box amount with the box width to get the new width to hold the box amount + padding 
    if(boxAmount <= $('.innerbox').length) { 
     newWidth = boxAmount * $('.innerbox').width() + boxAmount * 5; 
    } 
    // set the new calculated width 
    $('#outline').width(newWidth);  
} 

Я написал сценарий, который принимает ширину контейнера, делит его на размер одного окна, полы его, что дает нам количество ящиков, вставляемых в контейнер. Затем он умножает это количество коробки на ширину окна, а затем дает нам новый размер для контура. Новый размер устанавливается в контур, и, таким образом, контур со всеми ячейками всегда остается центрированным, и не появляется странное белое пространство справа.

Answer 2

Я сделал это с чистым CSS, добавив пару контейнеров div вокруг квадратных элементов и играя с дисплеями и выравниванием текста. Смотрите демо here

HTML:

<div id='container'> 
    <div id='outline'> 
     <div class='innerbox'></div> 
     <div class='innerbox'></div> 
     <div class='innerbox'></div> 
     <!-- As many as you want -->    
    </div> 
</div> 

CSS:

#container { 
    width:100%; 
    text-align:center; 
} 
#outline { 
    text-align: left; 
    display: inline-block; 
    /* for ie6/7: */ 
    *display: inline; 
    padding:5px 5px 0px 5px;; 
    border: 1px black dashed; 
    zoom:1; 
} 
.innerbox { 
    display:inline-block;  
    margin:0 auto 0 auto; 
    height:50px; 
    width:50px; 
    background:red; 
} 

Примечание основываясь на комментариях ниже

Существует пространство между правым большинством поле и право его контейнер, когда ящики занимают более одной строки. Без какой-то из Java-script Этот небольшой объем пространства, невозможно полностью удалить

Редактировать, чтобы добавить полностью функциональные возможности с помощью JavaScript

Вот моя попытка достижения полной функциональности с помощью JavaScript и JQuery: demo here. Он все еще сжимается при уменьшении размера окна из-за добавленного <br/>, но я буду искать исправление, и код может быть полезен некоторым пользователям в дополнение к вашему ответу. Я думаю, что мое решение немного более общее, чем ваше. Рад, что я мог бы помочь вам получить правильную идею!

Чистый JavaScript версии добавлены позже

Here моя самая последняя версия этой цели. Это в чистом JavaScript, устраняет необходимость в контейнере, и удаляет жестко набивка значения

Answer 3

Если вы хотите использовать медиа-запрос, чтобы справиться с этим, то это, вероятно, будет что-то вроде

@media only screen and (max-width: 1280) { 
    .innerBox { 
     width: 20%; 
    } 
} 

@media only screen and (max-width: 1024) { 
    .innerBox { 
     width: 10%; 
    } 
} 

@media only screen and (max-width: 768) { 
    .innerBox { 
     width: 5%; 
    } 
} 

Эти width У меня есть только произвольные числа. Ширина в% также произвольна, но если вы хотите, чтобы ящики хорошо вписывались в 100%, тогда они должны были бы разделить равномерно на 100. Я не включал никаких дополнений или полей, я уверен, что вы можете понять, что часть , Пожалуйста, имейте в виду, что медиа-запрос не поддерживается в старых браузерах, таких как IE8 и ниже. Но вы можете скачать js-плагины, чтобы заставить их работать.Google - ваш друг