09.04.2010, 20:48
|
 |
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,492
|
|
Вот навскидку рабочий вариант, только его надо допилить и облагородить.)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>demo</title>
<style type="text/css">
* {margin:0px;padding:0px}
.a {border:2px solid aqua;overflow:hidden}
.b, .c {position:relative;float:left}
.b {left:-50%;border:2px solid blue}
.c {left:50%}
.d {clear:both}
.b div {border:1px solid red}
</style>
</head>
<body>
<body>
<div class="a">
<div class="c">
<div class="b">
<div style="width:800px;">1</div>
<div style="width:500px;">2</div>
</div>
</div>
<div class="d"><!-- ie такой ie --></div>
</div>
</body>
</html>
Последний раз редактировалось Aetae, 09.04.2010 в 21:50.
|
|
09.04.2010, 21:27
|
 |
|
|
Регистрация: 27.12.2008
Сообщений: 4,201
|
|
|
Aetae, внутренние div должны быть inline или вести себя подобный образом, т.е. их может быть несколько в строке
|
|
09.04.2010, 21:30
|
|
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,492
|
|
|
Ога, посмотрим) Посмотрели, подумали. Что-то первый пост о "несколько в одну строчку" не говорит: "двадцать болков 300px" и всё.
Не втыкаю в смысл того, о чём вы говорите, товарищ x-yuri: есть несколько блоков, которые должны помещаться на одной строке, но при этом не растягивать контейнер - что за ересь?) Если они должны быть в одной строке они должны растягивать контейнер. Если они не должны растягивать его, то они должны переноситься, очевидно же.) А если нужно непонятное извращение с переносом одних и не переносом других, то этого можно добиться только прописыванием конкретным блокам конкретного стиля.)
P.S. Забейте в любой(флоат, илайн - пофиг) контейнер с не фиксированной шириной истинно инлайн элемент, т.е. обычный текст, понаблюдайте за результатом и проникнитесь.
Последний раз редактировалось Aetae, 09.04.2010 в 21:44.
|
|
10.04.2010, 04:29
|
|
Аспирант
|
|
Регистрация: 26.02.2010
Сообщений: 71
|
|
|
Блоки заполняются в строку с последующим автоматическим переносом (если имеют общие размеры больше предоставленого им контейнера) и имеют равный фиксированый размер каждого блока. Когда все блоки умещаются в одну строку, проблем никаких нет. Но как только общая ширина всех блоков становится больше ширины предоставленой им области (в нашем случае ширины окна браузера), то они переносятся на вторую строку, т.е. ниже. И в большинстве браузеров этот перенос сопровождается растяжением по ширине родительского блока (который тоже inline-block либо float и соответственно должен автоматом подстраиваться под внутренний контент) на всё окно браузера.
Получается по мнению создателей браузеров, перенос строк должен быть обязательно указан в разметке, иначе браузер будет вести себя так, как ему вздумается.
Насчёт прикреплённой картинки - на ней видно, при заполнении в цикле 5-ти блоков, четвёртый блок в экран невместился и соответственно перескочил на строку ниже вместе с пятым. Синий блок при этом никуда не растянулся (он же inline-block / float, всё правильно сделал). На такой идеал наблюдается только в Опере.
Вобщем вывод - без js такого сделать нельзя. Если все согласны с этим, то берусь за js.
Сама первоначальная проблема - выровнять относительно родителя по центру синий блок, а автоматически заполняемый контент, который внутри него, выровнять по левому краю. Этому мешает только одно - растяжение синего блока.
|
|
10.04.2010, 05:09
|
|
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,492
|
|
|
Тут уж ничего не поделаешь. Разница в подходе.) Опера, ие6 - как вам надо, фф, хром - как, имхо, удобнее в большинстве случаев.)
|
|
10.04.2010, 07:37
|
|
Аспирант
|
|
Регистрация: 26.02.2010
Сообщений: 71
|
|
|
Если бы я хотел расширить синий блок по экрану, я бы просто убрал оттуда inline-block, оставив див как он есть.
А так, что есть float или inline-block у дива, что их нету, разницы никакой.
имхо - глюк браузеров, тем более приходится использовать js для устранения данного эффекта.
|
|
10.04.2010, 07:56
|
|
|
|
Регистрация: 27.12.2008
Сообщений: 4,201
|
|
|
Сообщение от DMH
|
|
имхо - глюк браузеров, тем более приходится использовать js для устранения данного эффекта.
|
это баг, если ты укажешь место в спецификации, где сказано, что должно быть так, как тебе нужно
|
Сообщение от Aetae
|
|
фф, хром - как, имхо, удобнее в большинстве случаев.)
|
хм, интересно, в каких случаях это удобно? Мне пока не нужно было ни первое, ни второе поведение браузеров. (Мысли вслух) Или просто не помню? |
|
10.04.2010, 08:21
|
|
Аспирант
|
|
Регистрация: 26.02.2010
Сообщений: 71
|
|
|
Что за спецификация?
|
|
10.04.2010, 18:15
|
|
|
|
Регистрация: 27.12.2008
Сообщений: 4,201
|
|
либо с w3c, либо от производителя браузера (если мы о ff говорим, например). Ну или где-нибудь еще, где написано что должно быть так, как тебе нужно |
|
11.04.2010, 07:02
|
|
Аспирант
|
|
Регистрация: 26.02.2010
Сообщений: 71
|
|
|
w3c - не браузер, на отображение страницы не влияет, поэтому его даже не рассматриваем.
Остаётся только здравый смысл и браузер, вот по этим кретерям и определяем, что глюк, а что не глюк.
Но правда и в том, что все эти философские рассуждения проблему не решат.
|
|
|
|
