在列表中顯示圖片但在html中左側浮動

Question

如何創建浮動到左側但不相互重疊的圖片和文本列表？即使它們的尺寸有所不同。

Answer 1

裹在主容器中的所有圖像內容。然後使用子容器將圖像和文字包裝在一起。這兩個圖片和文字浮到左：

<div class="image-wrapper"> 
    <div class="image clearfix"> 
     <img src="images/1.jpg" alt="" /> 
     <p>Some Text</p> 
    </div> 
    <div class="image clearfix"> 
     <img src="images/1.jpg" alt="" /> 
     <p>Some Text</p> 
    </div> 
    <div class="image clearfix"> 
     <img src="images/1.jpg" alt="" /> 
     <p>Some Text</p> 
    </div> 
</div> 

CSS：

.image-wrapper .image { 
    display: block; 
    padding-bottom: 10px; 
} 
.image-wrapper .image img, 
.image-wrapper .image p { 
    float: left; 
} 
.image-wrapper .image img { 
    margin-right: 10px; 
} 
.clearfix:before, 
.clearfix:after { 
    content: '\0020'; 
    display: block; 
    overflow: hidden; 
    visibility: hidden; 
    width: 0; 
    height: 0; 
} 
.clearfix:after { clear: both; } 
.clearfix { zoom: 1; } 

見Fiddle

Answer 2

demo 與內嵌CSS

<div class="newWrapper"> 
    <div class="person1" style="float:left; display:inline-block; "> 
     <span style="float:left;width: 20%;"> 
      <img src="http://www.ninahale.com/wp-content/uploads/2013/08/Google.jpg" width="70" height"70" /></span> 
     <span style="float:right;width: 80%;"> 
    <p style="float:right; display:block;">text describing the image</p> 
     </span> 
    </div> 
    <div class="person1" style="float:left; display:inline-block; "> 
     <span style="float:left;width: 20%;"> 
      <img src="http://www.ninahale.com/wp-content/uploads/2013/08/Google.jpg" width="70" height"70" /></span> 
     <span style="float:right;width: 80%;"> 
    <p style="float:right; display:block;">text describing the image</p> 
     </div> 
    </div>