Как сделать, чтоб DIV растягивался по высоте по содержимому?

Question

[Евгений Обыкновенный]

Один DIV содержится в другом DIV. Если у внутреннего DIV свойство float: left, то он вылазит за пределы внешнего DIV, внешний DIV растягивается в высоту только по тексту. Можно каким-то CSS-свойством внешнего DIV сделать так, чтоб он растягивался по внутреннему DIV подобно тому, как это делают таблицы? Следить за содержимым внешнего DIV нет возможности, в нем может быть произвольный контент.

<div style="width: 200px; border: 1px solid red;">
  <div style="float: left; background-color: yellow; height: 200px">12345</div>
  text text text text text text text 
  text text text text text text text 
  text text text text text text text 
  text text text text text text text 
  text text text text 
</div>

https://jsfiddle.net/a6ucwbvg/

Comments

[Ankhena]

Гуглите clearfix.
Или используйте overflow: hidden для родителя.

А судя по картинке, флоаты там лишние и вам нужен флекс или грид.

Answer 1

[JTester]

.clearfix {
    zoom: 1;
}
.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}

Comments

[Евгений Обыкновенный]

Попробовал. Не подходит. Это равносильно добавлению в конце содержимого <div style="clear:both"></div>, именно таким способом я сейчас и борюсь с вылезанием. Но с этим дополнительным элементом проблема. Если содержимое DIV заканчивается на <p>...</p>, то из-за этого последнего очищающего элемента образуется лишний отступ.

[JTester]

Евгений Обыкновенный, дайте тогда вашему первому блоку float: right; и он встанет на место

Answer 2

[Pavel-ww]

Не правильная разметка и не те css свойства - причина проблемы. Пытаетесь прикрутить костыль к костылю.

<div class="wrapper">
        <div class="numbers">12345</div>
        <p class="text">
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odio, nam numquam soluta voluptas quasi laboriosam
            temporibus officia culpa nulla iure.
        </p>
    </div>

.wrapper {
    border: 1px solid red;
    max-width: 200px;
    display: flex;
}
.numbers {
    background-color: yellow;
}

Comments

[Евгений Обыкновенный]

Не подходит. Если внутри несколько блоков, они в строку выстраиваются.
https://jsfiddle.net/4osbexgd/

[Pavel-ww]

Опять разметка не правильная. Не внимательны. Поместите текст в P или в DIV.

А как вам надо? Сколько айтемов должно быть (айтем - блок содержащий оба ваших объекта)? Как они должны размещаться? Я вам базовый код дал, всё остальное дело техники. Скриншот полного лайоута предоставьте. Забудьте вообще про float. В 2021 это свойство стоит использовать только по его прямому назначению - обтекание объекта текстом, а не создание лайоутов. И не инлайнте стили - это моветон. CSS в отдельном файле должен быть.

[Евгений Обыкновенный]

Pavel-ww, неправильная, но в базе есть то, что есть. Нужно вытаскивать из базы, обертывать в DIV и выводить. Может быть текст с абзацами через br, может через p, может быть через div, может вперемешку. Нужен универсальный контейнер, который растягивается под все.

[Pavel-ww]

Евгений Обыкновенный, без разницы что в базе. На разметку контейнера это как влияет? А у вас не правильная разметка именно контейнера (ов). Создаете нужный лайоут, а внутри расставляете php вызовы из базы. И пусть там будут div -ы br-ы и весь прочий мусор.

Если прям с инлайн стилями с (float и прочим) выводится из базы, то тут только джаваскриптом чистить и формировать лайоут. Нет никаких css свойств чтобы это исправить. В любом случае дополнительный html потребуется, хоть даже если clearfix использовать. Но коль уж доп html нужен, то лучше на флексе сделать.

Добавил код в ответ - играйтесь

Answer 3

[Lynn «Кофеман»]

Гуглить css clearfix