0

Есть код (упрощенно):

<div id="main">
  <div id="left">Прижат ЛЕВО-ВЕРХ</div>
  <div id="right">Прижат ПРАВО-НИЗ</div>
</div>

Вот в очередной раз убеждаюсь, что у меня проблемы с css-позиционированием и кроссбраузерностью.

В общем задача: нужен css-код следующего характера. Блок main должен растягиваться по ширине исходя из ширины внутренних блоков. И по высоте так же исходя из наибольшей высоты внутреннего блока. Блок left-нужно прижать слева вверху относительно main. Блок right - справа внизу, так же относительно main.

Делал так:

div#main { position: relative; display: inline-block; width: auto}
div#left {width: 500px}
div#right {position: absolute;bottom: 0;right: 0}

Но в результате получается, что main растягивается по ширине всей страницы, а не по своему содержимому.

1 ответ 1

4

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

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org  /TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru">
<head>
<title>Блоки</title>
<meta http-equiv="Content-Type" content="text/html; charset:windows-1251"/>
<style type="text/css">
    html, body {
        width: 1000px;
        height: 700px;
    }
    div#main {
        width: 500px;
        border: 1px solid black;
    }
    div#left {
        width: 100px;
        height: auto;
        border: 1px solid green;
    }
    div#right {
        width: 100px;
        height: auto;
        border: 1px solid red;
        margin-left: 398px;
    }
</style>
</head>
<body>
    <div id="main">
        <div id="left">Лево-вверх</div>
        <div id="right">Право-низ</div>
    </div>
</body>
</html>

Высота блоков выстраивается в зависимости от высоты содержимого. а высота "главного" контейнера меняется в зависимости от высоты, содержащихся в нём левого и правого блоков. В чём была проблема: неправильное понимание понятий auto и 100%. Иногда браузер рассматривает эти понятия идентичными. тем более, если Вы нигде не указываете абсолютных размеров (хотя бы для ширины и высоты всей страницы). Я уже как-то описывал эту ситуацию в каком из вопросов например в этой. можете почитать, если интересно. К тому же, использование абсолютных размеров помогает избежать большое количество "своих" толкований браузерами IE блочной модели, ибо после задания ширины или высоты элементу присвается свойство hasLayout и браузер практически перестаёт "шалить". В данном случае браузер понимает width: auto для блока right, как "занимай 100% ширины родительского блока". Совет: не брезгуйте абсолютными размерами. Даже, если хотите реализовать резиновую вёрстку.

Второй способ:

Второй способ реализует уже мою идею с плавающей моделью.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru">
<head>
<title>Блоки</title>
<meta http-equiv="Content-Type" content="text/html; charset:windows-1251"/>
<style type="text/css">
    html, body {
        width: 1000px;
        height: 700px;
    }
    div#main {
        width: 500px;
        height: 300px;
        border: 1px solid black;
    }
    div#left {
        width: 100px;
        height: auto;
        border: 1px solid green;
        float: left;
    }
    div#right {
        width: 100px;
        height: auto;
        border: 1px solid red;
        float: right;
        margin-top: 278px;
    }
</style>
</head>
<body>
    <div id="main">
        <div id="left">Лево-вверх</div>
        <div id="right">Право-низ</div>
    </div>
</body>
</html>

Так как при плавающей модели плавающие блоки "извлекаются" из нормального потока - для корректной работы лучше задать фиксированную высоту родительского блока. Ну, чтобы "прижать" правый блок к низу - увеличиваем верхнее поле на нужное количество пикселей (в том числе и для этого необходимо знать высоту родительского блока). стоит заметить: для нормальной работы в браузерах IE необходимо наличие, так называемого, "очищающего" элемента. для него необходимо указать свойство clear: both. Ибо данный браузер ПО-СВОЕМУ понимает эту модель.

Вот, вроде, и всё, что я хотел написать! Надеюсь, мне удалось Вам помочь и благодарен за голоса))))

6
  • я пока с телефона сижу и не могу более подробно ответить,но можно попробовать задать фиксированные размеры родительского блока,вместо абсолютного позиционирования-двинуть правый нижний блок полями.
    – LeD4eG
    17 окт 2011 в 13:40
  • еще один вопрос:использование inline-block действительное оправдано?если нет-необходимости в нем нет.div и так блочный и добавлять ему поведение строчного элемента редко необходимо.
    – LeD4eG
    17 окт 2011 в 13:45
  • inline-block просто для пробы делал. Так то конечно, оно не обязательно. Я на самом деле уже что только пробывал, ничего не получается. Выставил внутренним блокам float:left - все, ширина родителя тянется по дочерним элементам. Но теперь не могу правый блок прижать к низу. Ну и как-бы все это выглядит хорошо только в нормальных браузерах. В IE дочерние блоки друг под другом находятся.
    – DemoS
    17 окт 2011 в 13:50
  • правому выставьте float:right,а к низу прижмите верхним полем(для этого надо знать высоту родительского блока).чтобы в ие нормально работала плавающая модель необходимо наличие 'очищающего' элемента,который будет отменять это поведение.т.е.надо добавить элемент с clear:both
    – LeD4eG
    17 окт 2011 в 13:57
  • я думаю,что этот совет вряд ли нужен,но указание корректного доктайпа очень важно и помогает решить множество проблем
    – LeD4eG
    17 окт 2011 в 14:03

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.