CSS中排列的圖片旁邊的文字

Question

我想知道是否有某種方法可以對齊照片右側的文本，並且即使在圖像使用HTML和CSS結束後，文本仍保留在同一個「框」中。我試圖完成的一個快速「圖」如下：

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

感謝您的任何幫助！

Answer 1

如果您在文本div上設置寬度並同時浮動圖像和文本left（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

將文本放入某種容器中，然後將該容器浮動到浮動圖像旁邊。下面的代碼示例應該給你的想法：

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

您通常會爲文本創建一個div或p元素，併爲圖像和文本提供float: left。確切的實現取決於其他參數，如寬度固定，佈局是什麼樣的，等等。

Answer 4

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>