Вот навскидку рабочий вариант, только его надо допилить и облагородить.)
<!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, внутренние div должны быть inline или вести себя подобный образом, т.е. их может быть несколько в строке
|
Ога, посмотрим) Посмотрели, подумали. Что-то первый пост о "несколько в одну строчку" не говорит: "двадцать болков 300px" и всё.
Не втыкаю в смысл того, о чём вы говорите, товарищ x-yuri: есть несколько блоков, которые должны помещаться на одной строке, но при этом не растягивать контейнер - что за ересь?) Если они должны быть в одной строке они должны растягивать контейнер. Если они не должны растягивать его, то они должны переноситься, очевидно же.) А если нужно непонятное извращение с переносом одних и не переносом других, то этого можно добиться только прописыванием конкретным блокам конкретного стиля.) P.S. Забейте в любой(флоат, илайн - пофиг) контейнер с не фиксированной шириной истинно инлайн элемент, т.е. обычный текст, понаблюдайте за результатом и проникнитесь. |
Вложений: 1
Блоки заполняются в строку с последующим автоматическим переносом (если имеют общие размеры больше предоставленого им контейнера) и имеют равный фиксированый размер каждого блока. Когда все блоки умещаются в одну строку, проблем никаких нет. Но как только общая ширина всех блоков становится больше ширины предоставленой им области (в нашем случае ширины окна браузера), то они переносятся на вторую строку, т.е. ниже. И в большинстве браузеров этот перенос сопровождается растяжением по ширине родительского блока (который тоже inline-block либо float и соответственно должен автоматом подстраиваться под внутренний контент) на всё окно браузера.
Получается по мнению создателей браузеров, перенос строк должен быть обязательно указан в разметке, иначе браузер будет вести себя так, как ему вздумается. Насчёт прикреплённой картинки - на ней видно, при заполнении в цикле 5-ти блоков, четвёртый блок в экран невместился и соответственно перескочил на строку ниже вместе с пятым. Синий блок при этом никуда не растянулся (он же inline-block / float, всё правильно сделал). На такой идеал наблюдается только в Опере. Вобщем вывод - без js такого сделать нельзя. Если все согласны с этим, то берусь за js. Сама первоначальная проблема - выровнять относительно родителя по центру синий блок, а автоматически заполняемый контент, который внутри него, выровнять по левому краю. Этому мешает только одно - растяжение синего блока. |
Тут уж ничего не поделаешь. Разница в подходе.) Опера, ие6 - как вам надо, фф, хром - как, имхо, удобнее в большинстве случаев.)
|
Если бы я хотел расширить синий блок по экрану, я бы просто убрал оттуда inline-block, оставив див как он есть.
А так, что есть float или inline-block у дива, что их нету, разницы никакой. имхо - глюк браузеров, тем более приходится использовать js для устранения данного эффекта. |
Цитата:
Цитата:
|
Что за спецификация?
|
либо с w3c, либо от производителя браузера (если мы о ff говорим, например). Ну или где-нибудь еще, где написано что должно быть так, как тебе нужно
|
w3c - не браузер, на отображение страницы не влияет, поэтому его даже не рассматриваем.
Остаётся только здравый смысл и браузер, вот по этим кретерям и определяем, что глюк, а что не глюк. Но правда и в том, что все эти философские рассуждения проблему не решат. |
| Часовой пояс GMT +3, время: 13:22. |