Сведения о вопросе

Htmlщик

11:06, 22nd August, 2020

Теги

CSS   HTML    

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

Просмотров: 288   Ответов: 4

Возникла интересная задача — необходимо сверстать блок с нефиксированной шириной (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>

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



  Сведения об ответе

VERSUION

14:32, 16th August, 2020

Как всегда: сам спросил — сам отвечаю. Достаточно как всегда одной таблетки:



   div.popup > div {

     display: inline-block;

     vertical-align: text-top;

   }


Увы, IE6 и 7 как всегда идёт большим лесом, но для меня это совершенно некритично.


  Сведения об ответе

DAAA

00:29, 11th August, 2020

Хотя возможно будет работать даже в IE6/7. См. комментарий по поводу inline-block тут внизу: htmlbook.ru/css/display


  Сведения об ответе

DINO

03:56, 16th August, 2020 

/*
* 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;
}


  Сведения об ответе

+-*/

10:53, 23rd August, 2020

поздновато, кнеш, но можно контейнеру overflow: hidden задать, если ширина и высота и не указаны


Ответить на вопрос

Чтобы ответить на вопрос вам нужно войти в систему или зарегистрироваться