Короткие тексты с картинками

[PavelTkachev]

У меня в макете превью новостей состоят из короткого текста и картинки справа. Мне нужно, чтобы текст обтекал картинку. Это легко добиться с помощью float:left; для картинки. Но если текст слишком короткий, то следующий за ним следующий превью новости оказывается накрыт картинкой сверху. Этого можно избежать, если каждому контейнеру дать свойство float:left. Но есть ли другой, более изящный способ?

[cupWebCode]

У меня в макете превью новостей состоят из короткого текста и картинки справа. Мне нужно, чтобы текст обтекал картинку. Это легко добиться с помощью float:left; для картинки. Но если текст слишком короткий, то следующий за ним следующий превью новости оказывается накрыт картинкой сверху. Этого можно избежать, если каждому контейнеру дать свойство float:left. Но есть ли другой, более изящный способ?

почитайте по clear: both;

[Z1gnet]

тут нужно вернуть нормальный поток элементов. есть разные способы. к примеру припишите контейнеру overflow:hidden; минус в том что все что вылазит за пределы контейнера будет обрезаться (тени, что-то вытащено отрицательным марджином или абсолютом).

вариант 2 это прописать контейнеру следующие свойства:

.container:after{ content:''; display:block; clear:both;}

еще можно через display:inline-block;

 

короче вот все 3 варианта и вариант без фиксов. добавил бордер контейнеру что бы было наглядно видно что с ним происходит. http://codepen.io/Z1gnet/pen/jEwRao

почитайте по clear: both;

а этим я бы пользовался в последнюю очередь. ведь это никак возвращает лайаут для контейнера. к примеру если у него будет бордер или фон получится некрасиво..

[SelenIT]

ведь это никак возвращает лайаут для контейнера

В смысле, не создает блочный контекст форматирования? Clearfix, если что, тоже этого не делает.

 

Кстати, если уж делать клирфикс, лучше всё-таки задавать псевдику display:table, а не block, потому что мало ли как бывает...

[PavelTkachev]

Спасибо большое за помощь.