CSS中图片旁的文本对齐

Question

我想知道是否有办法使用HTML和CSS将文本与图片右对齐，并在图片结束后仍然保持文本在同一“框”中。 我尝试实现的内容如下图所示：

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

感谢任何帮助！

- PF1

---

照片的宽度会一直保持不变，还是会有所变化？ - Skilldrick

如果您没有得到适合您的答案，请尝试使用DocType（页面底部有链接）。 - Synetech

Answer 1

如果在文本区域设置了一个宽度，并且将图像和文本都向左浮动（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>

- typeoneerror

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

- Luca Filosofi

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 。

- Jørn Schou-Rode

Answer 4

通常您会为文本创建一个 div 或 p 元素，并给图像和文本都设置 float: left。具体实现取决于其他参数，例如宽度是否固定，布局的样式等等。

- Pekka