Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.04.2010, 06:58
DMH DMH вне форума
Аспирант
Отправить личное сообщение для DMH Посмотреть профиль Найти все сообщения от DMH
 
Регистрация: 26.02.2010
Сообщений: 71

Запрет расширения блока
Есть к примеру 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 такое сделать нельзя, то видимо придётся задействовать скрипты и либо ужимать блок после отрисовки, либо изначально измерять блок, вычислять сколько в него влезет элементов и затем уже заполнять.
Изображения:
Тип файла: jpg op9.jpg (18.4 Кб, 18 просмотров)
Тип файла: jpg ff.jpg (14.6 Кб, 14 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 09.04.2010, 09:21
Аватар для Skipp
.
Отправить личное сообщение для Skipp Посмотреть профиль Найти все сообщения от Skipp
 
Регистрация: 30.03.2010
Сообщений: 1,813

элемент div всегда растягивался по ширине родительского окна, что у тебя и происходит див "а" растягивается, относительно боди, а див "б" относительно диву а. Решить эту проблему можно задав им необходимую ширину. Для этого можно использовать js, но надо заранее осознавать какая у тебя будет структура. А точнее, если ты будешь вставлять блоки со стилем float:left тогда надо знать, сколько блоков влезет в строку и высчитать их суммарную ширину. Всё из-за того, что блок является на странице отдельным элементом и блоки друг на друга не влияют, если есть предопределённые стили. Поставь ширину блока "а" и увидишь.
Ещё вариант использовать как контейнер для блоков другой элемент, допустим таблицу. Создай таблицу с одной ячейкой и получишь в принцепе тот же блок, но растягивающийся по содержимому.
__________________
.
Ответить с цитированием
  #3 (permalink)  
Старый 09.04.2010, 11:04
DMH DMH вне форума
Аспирант
Отправить личное сообщение для DMH Посмотреть профиль Найти все сообщения от DMH
 
Регистрация: 26.02.2010
Сообщений: 71

Все дивы в данном случае инлайновые элементы (за исключением "a", он просто висит для нагрузки), почему они должны растягиватся по экрану, а не по содержимому?

Всё тоже самое будет, если присвоить им float:left.
Ответить с цитированием
  #4 (permalink)  
Старый 09.04.2010, 11:10
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

они растягиваются по содержимому: если блоки поместяться в строку - все будет как надо. Но так как они не помещаются, b растягивается по максимуму в ff. Думаю, это поведение нигде не зафиксировано, поэтому браузеры ведут себя по-разному

Сообщение от DMH
а родительский блок забывает поставить на место (ужать)
интересная интерпретация. Может он просто не считает нужным ужимать?

попробуй table
Ответить с цитированием
  #5 (permalink)  
Старый 09.04.2010, 11:12
Аватар для Skipp
.
Отправить личное сообщение для Skipp Посмотреть профиль Найти все сообщения от Skipp
 
Регистрация: 30.03.2010
Сообщений: 1,813

потому-что это блок и он при не имении фиксированной ширины растягивается по родителю, а не дочери. Почему спроси у разрабов.
А ответ я по моему тебе дал, делай таблицу и не мучай мозг.
table + div залог успеха.
__________________
.

Последний раз редактировалось Skipp, 09.04.2010 в 11:20.
Ответить с цитированием
  #6 (permalink)  
Старый 09.04.2010, 11:17
DMH DMH вне форума
Аспирант
Отправить личное сообщение для DMH Посмотреть профиль Найти все сообщения от DMH
 
Регистрация: 26.02.2010
Сообщений: 71

Сообщение от Skipp Посмотреть сообщение
потому-что это блок и он при не имении фиксированной ширины растягивается по родителю, а не дочери.
Почитайте про - float:left/right, inline, inline-block.
Ответить с цитированием
  #7 (permalink)  
Старый 09.04.2010, 11:19
DMH DMH вне форума
Аспирант
Отправить личное сообщение для DMH Посмотреть профиль Найти все сообщения от DMH
 
Регистрация: 26.02.2010
Сообщений: 71

Сообщение от x-yuri
Думаю, это поведение нигде не зафиксировано, поэтому браузеры ведут себя по-разному
Жаль, что они не ведут себя как Опера
Ответить с цитированием
  #8 (permalink)  
Старый 09.04.2010, 11:26
DMH DMH вне форума
Аспирант
Отправить личное сообщение для DMH Посмотреть профиль Найти все сообщения от DMH
 
Регистрация: 26.02.2010
Сообщений: 71

С таблицей та же история, ничуть не лучше, так же оставляет пустоту справа.
Ладно, наверное скриптом будет проще измерить основной блок, посчитать сколько влезет в него элементов и задать фиксированый размер. + onresize приципить с перерасчётом.
Ответить с цитированием
  #9 (permalink)  
Старый 09.04.2010, 11:44
Аватар для Skipp
.
Отправить личное сообщение для Skipp Посмотреть профиль Найти все сообщения от Skipp
 
Регистрация: 30.03.2010
Сообщений: 1,813

Сообщение от DMH Посмотреть сообщение
С таблицей та же история, ничуть не лучше, так же оставляет пустоту справа.
Ладно, наверное скриптом будет проще измерить основной блок, посчитать сколько влезет в него элементов и задать фиксированый размер. + onresize приципить с перерасчётом.
так ты убери блок "a" и "b" и он не будет растягиваться. Вставь два блока с фиксированной длиной в ячейку таблицы.

А вообще какого ты результата хочешь добиться?
__________________
.
Ответить с цитированием
  #10 (permalink)  
Старый 09.04.2010, 12:13
DMH DMH вне форума
Аспирант
Отправить личное сообщение для DMH Посмотреть профиль Найти все сообщения от DMH
 
Регистрация: 26.02.2010
Сообщений: 71

Сообщение от DMH
Есть к примеру 20 блоков <div> размером 300px. Они заполняются в цикле слева направо в выровненый по центру родительский блок <div>.
Вот этого. Только выражение "выровненый по центру" не означает растянутый на весь экран. На рисунках всё видно.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Размещение блока, вопрос. Apri (X)HTML/CSS 0 26.03.2010 08:44
Одноразовый показ блока Cubapro Events/DOM/Window 2 10.03.2010 17:57
Jquery редактирование блока анкеты kodiua jQuery 0 22.02.2010 13:52
Изменение размера блока реклама в зависимости от разрешения экрана. toxiz77 Общие вопросы Javascript 3 11.02.2009 14:12
Скрытие блока после потери фокуса Nubi jQuery 2 06.02.2009 22:58