Заставить плавающий элемент или элемент абсолютного позиционирования оставаться в потоке & # 8220; с CSS

StackOverflow https://stackoverflow.com/questions/1042438

  •  22-07-2019
  •  | 
  •  

Вопрос

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

Проблема в том, что я хочу иметь элемент div с переменной высотой, у меня есть плавающее изображение слева в div, и я хочу, чтобы div был как минимум высотой изображения. Я также хочу, чтобы он был достаточно большим, чтобы вместить весь текст, который есть в потоке (это, очевидно, не проблема).

Мне нужно, чтобы изображение могло различаться по размеру. В настоящее время я использую решение jQuery, но оно работает. Так как я не чувствую отладки и чувствую, что должно быть каким-то решением CSS, я спрашиваю.

Кто-нибудь знает, как я могу это сделать?

Это было полезно?

Решение

Обычно я использую переполнение : скрытый или переполнение : auto .

Другие советы

Вместо того, чтобы использовать новый элемент для очистки div в конце, вы можете добавить это в абсолютный div css; 

overflow: auto;

Очевидно, IE любит играть по-другому, поэтому вам также нужно указать ширину. Я предполагаю, что абсолютный div имеет заданную ширину ... так что вы можете просто установить его на эту ширину. 

.abs-div {
    position: absolute;
    overflow: auto;
    width: 160px; /* Replace with your width */
}

Хак, который может сработать в вашей ситуации, - это добавить еще один элемент в ваш div после остальной части содержимого, для которого свойство clear clear CSS установлено в " both " (или слева, так как ваше изображение слева). например: 

<br style="clear: both" />

Это заставит элемент ниже плавающих элементов растянуть содержащий div.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top