Задать вопрос
Malamut
@Malamut
html

Растягивание контейнера двумя блоками с float: left

Возникла интересная задача — необходимо сверстать блок с нефиксированной шириной (popup), включающий два других блока с всё той же неизвестной шириной, таким образом, чтобы внутренние блоки выстраивались друг рядом с другом в линеечку и растягивали основной блок. Проблема вот в чём: если указать обоим внутренним блокам float: left, то они выстроятся друг под другом. Собственно никакие числовые параметры всех трёх блоков неизвестны — поэтому как-то указать ширину у чего-либо невозможно.

Вот простейший пример:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru" dir="ltr">
<head>
  <style type="text/css">
    div.popup {
      position: absolute;
    }

    div.popup > div {
      float: left;
      white-space: pre;
    }
    </style>
</head>
<body>
  ...
  <div class="popup">
    <div>Какое-то неизвестное содержимое</div>
    <div>Ещё какое-то неизвестное содержимое</div>
  </div>
  ...
</body>
</html>

В результате получим одну строчку под другой, а необходимо, чтобы они были в одну линию друг рядом с другом.
  • Вопрос задан
  • 3020 просмотров
Комментировать
Подписаться 8 Оценить Комментировать
Решения вопроса 1
Malamut
@Malamut Автор вопроса
Как всегда: сам спросил — сам отвечаю. Достаточно как всегда одной таблетки:


   div.popup > div {
     display: inline-block;
     vertical-align: text-top;
   }


Увы, IE6 и 7 как всегда идёт большим лесом, но для меня это совершенно некритично.
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ответы на вопрос 3
Malamut
@Malamut Автор вопроса
Хотя возможно будет работать даже в IE6/7. См. комментарий по поводу inline-block тут внизу: htmlbook.ru/css/display
Ответ написан
Комментировать
Комментировать
nuit
@nuit 
/*
* Gecko hack; Pre-FF3 Gecko uses -moz-inline-box instead of inline-block.
*/
html>body .goog-inline-block {
  display: -moz-inline-box; /* Ignored by FF3 and later. */
  display: inline-block; /* Ignored by pre-FF3 Gecko. */
}
/*
* Default rule; only Safari, Webkit, and Opera handle it without hacks.
*/
.goog-inline-block {
  position: relative;
  display: inline-block;
}
/*
* Pre-IE7 IE hack. On IE, "display: inline-block" only gives the element
* layout, but doesn't give it inline behavior. Subsequently setting display
* to inline does the trick.
*/
* html .goog-inline-block {
  display: inline;
}
/*
* IE7-only hack. On IE, "display: inline-block" only gives the element
* layout, but doesn't give it inline behavior. Subsequently setting display
* to inline does the trick.
*/
*:first-child+html .goog-inline-block {
  display: inline;
}
Ответ написан
Комментировать
Комментировать
Zitrix
@Zitrix
поздновато, кнеш, но можно контейнеру overflow: hidden задать, если ширина и высота и не указаны
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 130 000 ₽
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Очистка ин.текста с изображения и создание обложки+корешка для книги
19 апр. 2024, в 15:34
14000 руб./за проект
Разработать фронтенд для интернет-магазина на фреймворке TS
19 апр. 2024, в 15:33
60000 руб./за проект
Спроектировать дизайн сводной SEO таблицы
19 апр. 2024, в 15:20
5000 руб./за проект
Ещё заказы