Как вместить любое кол-во блоков в фиксированном родительском блоке ?

Question

[nepster-web]

Собственно возникла такая ситуация, что нужно вместить любое-вол во блоков в 1 блоке фиксированной длины.
Тоесть:

К примеру у нас есть блок box:

.box {
    width:500px;
    height:80px;
    padding:20px;
    border:solid 1px red;
    overflow: hidden;
}

Внутрь него нужно вместить любое кол-во блоков c

.c {
    width:100px;
    height:80px;
    border:solid 1px blue;
    display: inline-block;
}

К примеру есть у нас блоков с от 1 до 4, то все прекрасно влезают. Если блок не влезать нужно как-то подвинуть все блоки кроме первого влево на недостающее кол-во пикселей.

К примеру 3 блока влезают:

<div class="box">
    <div class="c"></div>
    <div class="c"></div>
    <div class="c"></div>
</div>

К примеру 7 блоков не влезает:

<div class="box">
    <div class="c"></div>
    <div class="c" style="margin-left:-28px;"></div>
    <div class="c" style="margin-left:-28px;"></div>
    <div class="c" style="margin-left:-28px;"></div>
    <div class="c" style="margin-left:-28px;"></div>
    <div class="c" style="margin-left:-28px;"></div>
</div>

Подскажите пожалуйста как вообще этом можно оформить и как высчитать правильный margin-left?

Answer 1

[Юрий Лобанов]

jsfiddle.net/R9uq7/3

Скрипт все делает сам, если учесть, что по высоте блоки влезают.
У Вас - нельзя использовать inline-block, в этом случае появляется пробел между блоками. Не заметив этого сразу, я не мог понять, где моя ошибка. Что касается поправки (в коде я вычитаю 0.01) - насколько я понял, эта ошибка возникает из-за округления. Но с этой поправкой работает отлично, и на верстке она не видна.

Вот красивый пример )
jsfiddle.net/R9uq7/4

Comments

[nepster-web]

Во то что нужно. Большое спасибо. Буду смотреть что такое $('.c').outerWidth(true),

Answer 2

[Виталий Желтяков]

Таблицей делайте, а не дивами.

Comments

[nepster-web]

как вы себе это представляете ?

[Виталий Желтяков]

@nepster09 Однострочная таблица без рамки с не указаной шириной ячеек. Таблица имеет свойство растягивать ячейки под свои размеры.

[nepster-web]

да, но везде таки нужно фиксированные размеры. Вот в чем проблема.

[Виталий Желтяков]

@nepster09 Однострочная таблица с ячеками не указанной ширины, в которых находятся блоки фиксированной ширины. Вот так понятно?

[nepster-web]

@VitaZheltyakov везде фиксированные размеры. В родительском блоке и дочерних.

[nepster-web]

@VitaZheltyakov jsfiddle.net/R9uq7

[Виталий Желтяков]

Откровенно говоря, фантазии Вам не хватает - прописные истины приходится доказывать.
@nepster09 jsfiddle.net/mU8cf/1

[nepster-web]

@VitaZheltyakov jsfiddle.net/mU8cf/2/, ладно я согласен я тупой. Оно оно все равно растягивает таблицу. а должно быть фиксировано.

[Виталий Желтяков]

@nepster09 Ссылка не работает

[nepster-web]

@VitaZheltyakov jsfiddle.net/mU8cf/2

[Виталий Желтяков]

@nepster09 Я, к сожалению, не могу запихать 8 блоков по шириной 100px в контейнер шириной 500px. Думаю, Вам стоит обратиться к Лобачевскому.

[nepster-web]

@VitaZheltyakov нет, вы просто не поняли что мне нужно было. Пользователь выше любезно предоставил решение jsfiddle.net/R9uq7/3

[Юрий Лобанов]

@VitaZheltyakov не понимаю Вас, в вопросе же подробно объяснено и даже пример приведен, что требуется сделать. Нужно или найти margin-left или найти какой-то другой способ сделать так, чтобы любое количество блоков пусть и внахлест, но помещались в родителе.

[Виталий Желтяков]

@nepster09 Я этого "дизайнерского" решения совершенно не понимаю.