У меня есть изображение с float:left, и Id, как он, переполняет родительский элемент, но отключает переполнение. Вот как это выглядит без правил overflow:
Вот что я хочу:
Вот сценарий: http://jsfiddle.net/ZA5Lm/
По какой-то причине было решено, что overflow:hidden без явной высоты приводит к увеличению элемента.
Можно ли каким-то образом добиться эффекта Im после того, как вы не установили явную высоту? Явная высота не работает, потому что я хочу, чтобы этот div автоматически определялся на основе длины содержимого и ширины браузера.
По-моему, использование переполнения: скрытое без настроек измерений не имеет смысла. Если вы не хотите указывать высоту контейнера и , если ваши изображения имеют фиксированную ширину, вы можете использовать это решение: http://jsfiddle.net/ZA5Lm/11/
Изображение позиционируется с абсолютным, вынимая его из текстового потока. Однако - и я знаю, что это может быть уродливым - вам нужно указать отступы-левый, чтобы переместить текст в сторону от изображения.
Это немного сложно (я использую относительное + абсолютное позиционирование и конкретное дополнение к тексту позиции), но он выполняет заданный вами эффект без изменения разметки или настройки 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 больше не понадобится)
Я видел сообщение в CSS-Tricks, и он говорил об этом. Пойдите, проверьте это - http://css-tricks.com/minimum-paragraph-widths/
Это может быть полезно:) Удачи.
Также посмотрел ваш код, и я добавил float: прямо на ваш div, чтобы он выглядел так:
div {
border: 1px solid black;
padding: 10px;
float: right
/*overflow: hidden;*/
}
Не уверен, что это то, что вы хотите?