Question

我想知道是否有某种方法可以对齐照片右侧的文本，并且即使在图像结束后使用HTML和CSS，也可以将文本保留在同一个“框”中。我试图完成的快速“图表”如下：

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

感谢您的帮助！

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

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>

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。确切的实现取决于其他参数，例如widthds固定，Layout的外观等等。

CSS中照片旁边的文字对齐

4 个答案: