1

В блоке есть картинка и текст. Текст должен обтекать картинку. Если текста немного, то высота внешнего блока должна равняться высоте изображения.

Как сделать на чистом CSS, чтобы высота внешнего блока равнялась высоте изображения?

Подгон высоты Javascript'ом работает только с таймером. Около, 50 мс (время загрузки изображения).

Пример верстки Стили:

.wrap {
    background-color: #f76;
    height: auto;
}
.image-container {
    width: 20%;
    float: left;
}
.image-container img {
    width: 100%;
    border: 1px solid black;
}

3 ответа 3

1

Работает, если внешнему блоку задать display: inline-block Правда, есть одно "но" - для него перестают работать float: none и clear: both, т.е. перенос строки в HTML приходится делать вручную

0

Попробуй так:

<style>
.leftimg {
  float:left; /* Выравнивание по левому краю */
  margin: 7px 7px 7px 0; /* Отступы вокруг картинки */
}
.rightimg  {
  float: right; /* Выравнивание по правому краю  */ 
  margin: 7px 0 7px 7px; /* Отступы вокруг картинки */
}
</style>
3
  • No effect, к сожалению
    – Maxick
    9 мар 2016 в 14:23
  • @Maxick попробуй так i.imgur.com/6tgiYSS.png вот результат output.jsbin.com/kuseduve/1 9 мар 2016 в 16:35
  • Не то пальто. Если попробовать (в Вашем примере) в div "up" оставить пару строчек из всего текста, высота блока уменьшается до высоты текста в нем ("up") и нижний блок "налезает" на верхний.
    – Maxick
    10 мар 2016 в 7:45
0
.wrap:after {
  display: block;
  content: '.';
  height: 0;
  overflow: hidden;
  clear: both;
}
2
  • Хороший вариант. Кстати, можно в качестве контента использовать пробел (точка отобразится). Однако, применим только если у ".wrap" нет соседей слева или справа.
    – Maxick
    6 июн 2016 в 10:09
  • @Maxick, причём тут соседи справа и слева, если речь идёт об элементах с float внутри блока .wrap? Точка не отобразится, т. к. высота 0px и overflow:hidden;. Так исторически сложилось с тех времён, когда старые браузеры не умели одиночный пробел в content
    – alenkins
    6 июн 2016 в 11:33

Ваш ответ

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

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