Измените ширину внешнего div в зависимости от содержимого внутренних div.

Я пытаюсь отобразить класс эскизов в новой строке, если они не помещаются по ширине в div external-1, не показывая пустых мест в div external-1.

<div class="outer-block">
    <div class="outer-1">
        <div class="thumbnail">box 1</div>
        <div class="thumbnail">box 2</div>
        ...
        <div class="thumbnail">box 7</div>
    </div>
</div>

Размер класса миниатюр фиксирован на ширину, высоту 160 пикселей, 160 пикселей. Я пытаюсь сделать ширину div external-1 кратной 160px, чтобы дополнительные div с классом thumbnail переносились на следующую строку.

Также я пытаюсь центрировать содержимое div external-1 относительно div внешнего блока.

Вот ссылка на мой jsfiddle - http://jsfiddle.net/K2v3W/2/


css responsive-design fluid-layout css-float
person vishal    schedule 12.02.2013    source источник
comment
Поскольку у вас есть граница в 2 пикселя на миниатюрах, вам придется сделать это с кратностью 164 пикселя.   -  person Raphael Rafatpanah    schedule 13.02.2013

Ответы (1)


arrow_upward
0
arrow_downward

Насколько я понимаю, вы хотите, чтобы внешняя-1 была автоматической полной шириной, поэтому единственный способ сделать это только с помощью html/css — использовать медиа-запрос для установки ширины внешней-1, кратной 160px.

http://css-tricks.com/css-media-queries/

person Community    schedule 07.06.2013