|
Запрет расширения блока
Вложений: 2
Есть к примеру 20 блоков <div> размером 300px. Они заполняются в цикле слева направо в выровненый по центру родительский блок <div>.
Задача: сделать родительский блок по ширине заполняемого контента. Использование для контентных блоков float:left или inline-block - без разницы (а может и ещё как можно). Чтобы было понятней, приведу пример кода (правильно работает только в Опере!):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title></title>
<style>
.a {
border:2px solid aqua;
text-align:center;
min-width:1000px;
}
.b {
border:2px solid blue;
display:inline-block;
text-align:left;
}
.b div {
display:inline-block;
border:1px solid red;
}
div {
margin:5px;
}
</style>
</head>
<body>
<div class="a">
<div class="b">
<div style="width:800px;">1</div>
<div style="width:500px;">2</div>
</div>
<div>
</body>
</html>
Размеры поставил разные для наглядности. На рисунках видно, в Опере всё как надо, а остальные браузеры непонятно зачем растягивают родительский блок, хотя никакого контента там нет, только пустота. Есть предположение, что браузер пытается втиснусть элемент, расширяя родительский блок, затем при неудачной попытке переносит элемент на вторую строку, а родительский блок забывает поставить на место (ужать). Вобщем нужно так, как в Опере. Если с помощью css такое сделать нельзя, то видимо придётся задействовать скрипты и либо ужимать блок после отрисовки, либо изначально измерять блок, вычислять сколько в него влезет элементов и затем уже заполнять. |
элемент div всегда растягивался по ширине родительского окна, что у тебя и происходит див "а" растягивается, относительно боди, а див "б" относительно диву а. Решить эту проблему можно задав им необходимую ширину. Для этого можно использовать js, но надо заранее осознавать какая у тебя будет структура. А точнее, если ты будешь вставлять блоки со стилем float:left тогда надо знать, сколько блоков влезет в строку и высчитать их суммарную ширину. Всё из-за того, что блок является на странице отдельным элементом и блоки друг на друга не влияют, если есть предопределённые стили. Поставь ширину блока "а" и увидишь.
Ещё вариант использовать как контейнер для блоков другой элемент, допустим таблицу. Создай таблицу с одной ячейкой и получишь в принцепе тот же блок, но растягивающийся по содержимому. |
Все дивы в данном случае инлайновые элементы (за исключением "a", он просто висит для нагрузки), почему они должны растягиватся по экрану, а не по содержимому?
Всё тоже самое будет, если присвоить им float:left. |
они растягиваются по содержимому: если блоки поместяться в строку - все будет как надо. Но так как они не помещаются, b растягивается по максимуму в ff. Думаю, это поведение нигде не зафиксировано, поэтому браузеры ведут себя по-разному
Цитата:
попробуй table |
потому-что это блок и он при не имении фиксированной ширины растягивается по родителю, а не дочери. Почему спроси у разрабов.
А ответ я по моему тебе дал, делай таблицу и не мучай мозг. table + div залог успеха. |
Цитата:
|
Цитата:
|
С таблицей та же история, ничуть не лучше, так же оставляет пустоту справа.
Ладно, наверное скриптом будет проще измерить основной блок, посчитать сколько влезет в него элементов и задать фиксированый размер. + onresize приципить с перерасчётом. |
Цитата:
А вообще какого ты результата хочешь добиться? |
Цитата:
|
| Часовой пояс GMT +3, время: 21:43. |
|