Текст, совпадающий с фотографией в CSS

Мне интересно, есть ли способ выравнивать текст справа от фотографии и сохранять текст в том же "поле" даже после того, как изображение заканчивается использованием HTML и CSS. Быстрая "диаграмма" того, что я пытаюсь выполнить, приведен ниже:

------- --------
------- --------
-Image- - Text -
------- --------
------- --------
        --------
        --------

Спасибо за любую помощь!

Ответ 1

Если вы установите ширину в текстовом div и поместите как изображение, так и текст влево (поплавок: влево), это должно сделать трюк. Очистите поплавки после обоих.

<div style="float:left; width:200px">
    <img/>
</div>

<div style="float:left; width:200px">
    Text text text
</div>

<div style="clear:both"></div>

Ответ 2

DEMO: http://jsbin.com/iyeja/5

    <div id="diagram">
            <div class="separator"></div>
            <div class="separator"></div>

            <div id="text_image_box">
              <span class="image"><img src="http://l.yimg.com/g/images/home_photo_megansoh.jpg" alt="" /></span><span class="text"><p>some text</p></span>
              <div class="clear"></div>
            </div>

            <div class="separator"></div>
            <div class="separator"></div>
            <div class="separator"></div>
          </div>

    <style>
      /* JUST SOME FANCY STYLE*/
      #diagram { 
        width:300px;
        border:1px solid #000;
        padding:10px;
        margin:20px;
      }

      .separator { 
        height:2px;
        width:300px;
        border-bottom:1px dashed #333;
        display:block;
        margin:10px 0;
      }

      /* MAIN PART */
      #text_image_box { 
      width:300px;
      margin:0 auto;
      padding:0
      }

      .image { 
        float:left;
        width:180px;
        height:300px;
        overflow:hidden;
         margin:0 auto;
      }
      .text {
    float:right;
    width:100px;
    padding:0;
    margin:0 auto;
  }
  .text p { 
    margin:0;
    padding: 0 5px;
  }
      .clear {
      clear:both
      }
      </style>

Ответ 3

Поместите текст в какой-то контейнер и поместите его в контейнер рядом с плавающим изображением. Следующий образец кода должен дать вам идею:

<img src="..." style="float:left; width: 200px;" />

<div style="float:left; width: 400px;">
    <p>Bla bla...</p>
    <p>Bla bla...</p>
    <p>Bla bla...</p>
</div>

Если вам понадобится какой-то контейнер вокруг этих двух элементов для автоматической установки его высоты на самый высокий из двух плавающих элементов, вы можете установить overflow: hidden на этом контейнере. Чтобы заставить его работать и в IE6, вам нужно будет вернуть его на overflow: auto и добавить что-то странное, как height: 1px.

Ответ 4

Обычно вы создаете элемент div или p для текста и отображаете как изображение, так и текст a float: left. Точная реализация зависит от других параметров, таких как фиксированные widthds, как выглядит ваш макет и т.д.