CSS - простые два столбца
У меня есть жидкая страница (100% шириной) с этой внутренней частью:
[image-fixed-width] | [text-fluid-width -----------------------------------]
| -----------------------------------------------------
| -----------------------------------------------------
Мне нужен текст рядом с изображением, чтобы не перенести его, но отобразиться рядом с ним (как на иллюстрации), как другой столбец. В то же время текст должен охватить через всю страницу width. Это было бы легко путем установки оставленного полю на текст, но проблема состоит в том, что я не знаю точной ширины изображения. Размер изображения может варьироваться...
Есть ли какое-либо решение для этого?
4 ответа
Попробуйте добавить overflow: hidden; к вашему содержимому div. Это должно заставить его прилипнуть к вашим столбцам.
Изменить Это не будет работать в IE6 (см. Рисунок)
Объедините float: left для обоих элементов с display: block для текста.
Более простой способ сделать это - создать таблицу с двумя ячейками, одна для изображения, а другая для текста. Вы не будете использовать css, но он работает с любым браузером.
Это предположение, но я ожидаю, что это сработает.
<div style='width:100%; overflow:hidden'>
<img style='float:left'/>
<div style='float:left'>my text</div>
</div>
Логика заключается в том, что div (даже плавающий) должен расширяться, чтобы заполнить доступное пространство, а родительский элемент не будет растягиваться или допускать переполнение, поскольку установлены оба параметра.