Можно ли использовать переполнение: скрыто без явной высоты?

У меня есть изображение с float:left, и Id, как он, переполняет родительский элемент, но отключает переполнение. Вот как это выглядит без правил overflow:

Вот что я хочу:

Вот сценарий: http://jsfiddle.net/ZA5Lm/

По какой-то причине было решено, что overflow:hidden без явной высоты приводит к увеличению элемента.

Можно ли каким-то образом добиться эффекта Im после того, как вы не установили явную высоту? Явная высота не работает, потому что я хочу, чтобы этот div автоматически определялся на основе длины содержимого и ширины браузера.

Ответ 1

По-моему, использование переполнения: скрытое без настроек измерений не имеет смысла. Если вы не хотите указывать высоту контейнера и , если ваши изображения имеют фиксированную ширину, вы можете использовать это решение: http://jsfiddle.net/ZA5Lm/11/

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

Ответ 2

Это немного сложно (я использую относительное + абсолютное позиционирование и конкретное дополнение к тексту позиции), но он выполняет заданный вами эффект без изменения разметки или настройки height:

body {
    padding: 10px;
}
img {
    float: left;
    position: absolute;
    left : 10px;
}
div {
    border: 1px solid black;
    padding: 10px 10px 10px 280px;
    position : relative;
    overflow: hidden;
}

Я только что вставил стиль (даже если float:left больше не понадобится)

Ответ 3

Я видел сообщение в CSS-Tricks, и он говорил об этом. Пойдите, проверьте это - http://css-tricks.com/minimum-paragraph-widths/

Это может быть полезно:) Удачи.

Также посмотрел ваш код, и я добавил float: прямо на ваш div, чтобы он выглядел так:

div {
border: 1px solid black;
padding: 10px;
float: right
/*overflow: hidden;*/
}

Не уверен, что это то, что вы хотите?