Xpoint
   [напомнить пароль]

div: relative и и absolute

Метки: [без меток]
2010-10-05 14:08:16 [обр] Top manager(0/2)[досье]

Есть HTML, его результатом будет пара блоков, которые делят экран.

<div style="border: 1px solid lime; position: relative">
   <div style="width: 50%; position: absolute; top: 0px; left: 0px; border: 1px solid green">
      1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />
   </div>
   <div style="width: 50%; position: absolute; top: 0px; right: 0px; border: 1px solid green">
      1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />
   </div>
</div>

Вопрос: как сделать так, что бы "родительский" блок имел высоту равную максимальной одного из внутренних блоков?

спустя 16 минут [обр] Lynn «Кофеман»(56/571)[досье]
спустя 15 минут [обр] Top manager(0/2)[досье]
Я собственно позже так и сделал, но думал что есть еще более "красивое" решение
спустя 3 минуты [обр] Илья Cтpeльцын aka SelenIT(15/171)[досье]
Не делать обоих потомков абсолютными. Абсолютные потомки по определению не влияют на высоту родителя, "вываливаясь" из потока. Если неизвестно, который из блоков окажется выше, можно взять на вооружение метод Сергея Чикуёнка.
спустя 20 минут [обр] Top manager(0/2)[досье]
Илья Cтpeльцын aka SelenIT[досье] прикольный метод предложил Сергей +1
спустя 58 минут [обр] Top manager(0/2)[досье]

Lynn «Кофеман»[досье]
увы, я вариант имеет свои минусы.

я попробывал ваш вариант, а точнее тот что предлагается на странице по ссылке указанной вами. Сделал тест

<style>
#block_1
   {
   float: left;
   width: 34%;
   }
#block_2
   {
   float: left;
   width: 33%;
   }
#block_3
   {
   float: left;
   width: 33%;
   }
</style>
<div>
   <div id="block_1">
      1<br />1<br />1<br />1<br />
   </div>
   <div id="block_2">
      2
   </div>
   <div id="block_3">
      3
   </div>
</div>
<div style="border: 1px solid gray">00000000</div>

вроде получилось, то что они и пишут, но рамка значения "00000000" у меня охватывает значения 1, 2 и 3, при этом сдвинуто вправо, из-за увеличения р-ра #block_1

спустя 4 часа 22 минуты [обр] Marat Tanalin(6/78)[досье]
Используйте display: table* для современных браузеров, а для IE 6/7 — float: left; margin-right: -1px.
спустя 1 минуту [обр] Marat Tanalin(6/78)[досье]
И не забывайте про сброс обтекания после float-блоков.
спустя 9 часов [обр] Top manager(0/2)[досье]
Люди! Как вам такое решение? Нормально? Или лучше еще чего добавить?
<style>
#b
{
   display: table;
   zoom: 1;
}

#b_1, #b_2, #b_3
{
   display: table-cell;
   float: left; 
   margin-right: -1px;
}

#b_1
{
   width: 34%;
}
#b_2
   {
   width: 33%;
   }
#b_3
   {
   width: 33%;
   }
</style>
<div id="b">
   <div id="b_1">
      1<br />1<br />1<br />1<br />
   </div>
   <div id="b_2">
      2222222
   </div>
   <div id="b_3">
      3333333333333333333333333
   </div>
</div>
<div style="border: 1px solid gray">00000000</div>
спустя 12 часов [обр] Marat Tanalin(6/78)[досье]
«Между» элементами с display: table и display: table-cell в иерархии обязательно нужен элемент с display: table-row — иначе в Firefox ячейки (элементы с display: table-cell) будут при загрузке страницы непредсказуемым образом (то съедет, то не съедет) съезжать на вторую строку. По той же причине для браузеров, понимающих display: table, ширину ячеек тоже лучше не задавать — вместо этого лучше использовать table-layout: fixed для элемента с display: table, при отсутствии указания ширин ячеек автоматически обеспечивающего равную их ширину.
спустя 2 часа 33 минуты [обр] Филипп Ткачев(0/115)[досье]
Я в верстке не сведущ, поэтому спрошу: в чем тогда разница между табличной версткой и версткой div'ами, если им все равно приписывается поведение табличных элементов?
Ведь если браузер поймет, что нужно рассчитывать схему из div аналогично стандартной табличной схеме, то поведение у него будет таким же как и при наличии обычной таблицы.
спустя 1 час 46 минут [обр] Marat Tanalin(6/78)[досье]
Поразмышляйте на тему различий между семантикой данных и их представлением.
спустя 6 часов [обр] Top manager(0/2)[досье]

Филипп Ткачев[досье] логичный вопрос :)

Marat Tanalin[досье] немного туплю конечно, но можно перефразировать ваш пост?

спустя 1 минуту [обр] Top manager(0/2)[досье]

Marat Tanalin[досье] Что даст table-layout: fixed?

...при отсутствии указания ширин ячеек автоматически обеспечивающего равную их ширину.
А если нужно что бы ширина некоторых ячеек была определенной?

спустя 4 часа 19 минут [обр] Филипп Ткачев(0/115)[досье]
Marat Tanalin[досье], я частенько размышлял над семантикой и представлением. И вот к какому выводу я пришел. В конечном итоге человек оперирует с картинкой (имею ввиду пользователя ПК), т.е. представлением. Ему не важно, как оно сформировано, зато важно, как быстро оно создано и насколько корректно это происходит.
Семантика важна для людей с ограниченными способностями, мобильных устройств и, наверняка, поисковиков.
спустя 2 часа 58 минут [обр] Илья Cтpeльцын aka SelenIT(15/171)[досье]

Marat Tanalin[досье],

«Между» элементами с display: table и display: table-cell в иерархии обязательно нужен элемент с display: table-row — иначе в Firefox ячейки (элементы с display: table-cell) будут при загрузке страницы непредсказуемым образом (то съедет, то не съедет) съезжать на вторую строку.

Прошу прощения, в каких версиях FF происходит такая бяка? Помню, с display:table была другая проблема, рядом стоящие инлайновые элементы внезапно слипались (как будто становились ячейками таблицы), но в FF3.6 это поправили (эта же проблема была в Webkit, не знаю, как там сейчас ситуация, но больше там она, вроде, не вылезала). Плюс в очень древних FF (типа 1.0) и Операх (типа 7.5x) между "ячейками" получался как бы дефолтный cell-spacing=3, нужно было дописывать border-spacing (но это было совсем давно).

По спецификации, ЕМНИП, недостающие элементы табличной иерархии должны дорисовываться браузером автоматически, и новые браузеры (включая IE8) худо-бедно с этим справляются (только с table-footer-group и подобными есть проблемы, обязательно нужен table-cell внутри). На крайний случай, имхо, можно оставить только обертку с table-row — недостающий table, насколько я помню, неявно "обернет" его во всём мало-мальски актуальном...

Филипп Ткачев[досье], как минимум — разница в возможности ограничить это представление для узкой группы визуальных устройств отображения (скажем, screen, projection и print), оставив для любых прочих (handheld и т.п.) дефолтное поведение "потоком друг за дружкой"...

спустя 55 минут [обр] Top manager(0/2)[досье]
Илья Cтpeльцын aka SelenIT[досье]
По спецификации, ЕМНИП, недостающие элементы табличной иерархии должны дорисовываться браузером автоматически - наверное поэтому у меня IE8 и FF нормально покахывают страницу и без этих элементов.
спустя 1 час 20 минут [обр] Marat Tanalin(6/78)[досье]

Top manager[досье]
Задать только ширину этих некоторых псевдоячеек, оставив ширину хотя бы одной псевдоячейки не заданной — чтобы предотвратить ситуацию, когда суммарная вычисленная пиксельная ширина псевдоячеек превышает 100%.

Филипп Ткачев[досье]
По сути вы сами ответили на свой вопрос. Добавлю, что семантическая разметка даёт гибкость в обеспечении разного представления одних и тех же данных при выводе на разные устройства. Например, список отобразить как таблицу можно по всех браузерах с поддержкой display: table, а вот наоборот (таблицу как список) — далеко не во всех.

Илья Cтpeльцын aka SelenIT[досье]
Точную версию Firefox сказать не могу. Просто когда-то, не раз столкнувшись с переносом в Firefox (и только в нём) ячеек псевдотаблицы на вторую строку в случае отсутствия row-прослойки, взял за правило никогда её не пропускать. (Насколько я помню, Виталий Харисов из Яндекса тоже сталкивался с этой проблемой.) Поскольку баг проявлялся не всегда (самый неприятный тип багов), проблематично точно отследить версию, когда он, возможно, был устранён, но если устранён, то это, конечно, было бы замечательно.

Powered by POEM™ Engine Copyright © 2002-2005