Абсолютное нижнее позиционирование в относительном div

Я хочу расположить rightBottomPart внизу правой части, и я хочу, чтобы правая часть была такой же высокой, как и левая часть. Проблема в том, что я не знаю высоту содержимого в левой части и поэтому не могу установить высоту текста. (Высота в тексте решит эту проблему)

Прямо сейчас это выглядит так:

альтернативный текст

и я хочу, чтобы это выглядело так:

альтернативный текст

Мой код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
</head>
<body style="margin: 0px 0px 0px 0px;">
    <div id="headers" style="background-color: Olive; width: 300px; height: 50px;"></div>
    <div id="text" style="background-color: Navy; position: relative; width: 300px;">
        <div id="leftPart" style="background-color: Gray; width: 200px; float: left;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
        <div id="rightPart" style="background-color: Red; float: right;">
                <div id="rightTopPart" style="background-color: Lime; position: absolute; right: 0px; top: 0px;">top</div>
                <div id="rightBottomPart" style="background-color: Yellow; position: absolute; right: 0px; bottom: 0px;">bottom</div>
        </div>
    </div>
</body>
</html>

Это выглядит правильно в IE7, но не в остальных браузерах, которые я тестировал. Если я удалю тег DOCTYPE, он также будет хорошо выглядеть в IE8, но не в Google Chrome.

Что мне не хватает?

Спасибо, Карл.


css positioning
person Callprat    schedule 19.11.2009    source источник
comment
Суперпредложение: вместо использования атрибута style в html. Имейте все, что содержится в так называемой таблице стилей. использовать: <link rel="stylesheet" href="css/style2.css" type="text/css" media="all" />   -  person Jonno_FTW    schedule 19.11.2009
comment
Да, я знаю, но для этого примера я подумал, что этот способ даст меньше строк кода для вставки в мой вопрос.   -  person Callprat    schedule 19.11.2009

Ответы (1)


arrow_upward
3
arrow_downward

Чтобы держать плавающие элементы и положение под контролем, вам нужно помнить о двух вещах: положение является абсолютным в соответствии с его родительским элементом и обычно требует размеров, а плавающие объекты по умолчанию не имеют размеров.

Поскольку ваш тест представляет собой простую модель с двумя столбцами, взгляните на этот хороший обзор здесь, он может немного прояснить ситуацию: столбцы одинаковой высоты с css

Таким образом, трюк здесь заключается в том, чтобы дать #text значение float и pos:rel, и тогда #right*Part будет знать, где они расположены.

Посмотрите здесь:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>

<style>
body             { margin: 0; }
#headers         { background: Olive; width: 300px; height: 50px; }
#text            { background: Navy; position: relative; width: 300px; display: block; float:left; }
#leftPart        { background: Gray; width: 200px; float: left;  display: inline-block; }
#rightPart       { background: Red; }

#rightTopPart    { background: Lime;     position: absolute; right: 0; top: 0; }
#rightBottomPart { background: Yellow;  position: absolute; right: 0; bottom: 0; }
</style>                                 

</head>
<body>
    <div id="headers"></div>
    <div id="text">
        <div id="leftPart">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
        <div id="rightPart">
                <div id="rightTopPart">top</div>
                <div id="rightBottomPart">bottom</div>
        </div>
    </div>
</body>
</html>

С уважением, mtness

person mtness    schedule 19.11.2009
comment
Да, ты прав. Мне не нужен поплавок, когда я использую абсолютное позиционирование. Спасибо!! Карл - person Callprat; 19.11.2009