CSS中与照片对齐的文本

Posted 2023-03-05

【中文标题】CSS中与照片对齐的文本

【英文标题】：Text Aligned Next To Photo in CSS

【发布时间】：2011-01-27 05:13:05

【问题描述】：

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

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

感谢您的帮助！

【问题讨论】：

照片会一直保持相同的宽度，还是可变的？

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

【参考方案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>

【参考方案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"  /></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 元素，并为图像和文本提供float: left。确切的实现取决于其他参数，例如固定的宽度、布局的外观等等。