Выровненный текст рядом с фотографией в CSS

Question

Мне интересно, есть ли какой-нибудь способ выровнять текст справа от фотографии и сохранить текст в той же «рамке» даже после того, как изображение заканчивается с использованием HTML и CSS. Краткая «диаграмма» того, что я пытаюсь выполнить, приведена ниже:

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

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

Answer 1

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

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

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

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

Answer 2

ДЕМО: 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>

Answer 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.

Answer 4

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