對齊圖片和評論的迴應式網站

Question

如何對齊圖像和兩個跨度的一行

 <img src="../images/profile/profile.png" class="img" /> 
     <span class="name">Firt Name</span> 
     <span class="comment"> 
      This is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently this is end of count. 
     </span> 

小提琴http://fiddle.jshell.net/m3qyhoab/

我改變形象，跨度顯示屬性來阻止等等。但仍然沒有工作

Answer 1

嘗試使用表：

<table> 
     <tr> 
      <td><img src="http://i450.photobucket.com/albums/qq229/veraqueen/80X80-1.jpg" class="img" /></td> 
      <td><span class="name">Firt Name</span></td> 
      <td> <span class="comment"> 
       This is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently this is end of count. 
      </span></td> 
     </tr> 
</table> 

Answer 2

ñ加時賽肯定，如果是你期望的行爲，而是...試試這個：

http://fiddle.jshell.net/m3qyhoab/23/

Answer 3

CSS

.wrapper { 
    max-width:800px; 
    margin:30px auto; 
    background-color:#ccc; 
    display:inline-block; 
} 
.img { 
    width:80px; 
    float:left; 
    margin-right:15px 
} 
.name { 
    float:left; 
    width:80px; 
} 
.comment { 
    float:left; 
    width:600px; 
} 

DEMO

爲您的正常工作，你需要使用浮動

Answer 4

如果你想你的形象採取的垂直空間，並保持名稱和註釋對準其權利，你的寬度硬編碼到每一個類。你可以考慮做this。

避免使用<table>。對於更加結構化的解決方案，您可以使用bootstrap以及

乾杯！

Answer 5

Fidler

.wrapper { 
    max-width:800px; 
    margin:30px auto; 
    background-color:#ccc; 
} 
.img { 
    width:80px; 
    float:left; 
    margin-right:15px 
} 
.name { 
    float:left; 
    width:100px; 
} 
.comment { 
    float:left; 
    width:605px; 
} 

我提到什麼：

• 您忘記關閉使用的CSS;
• 您以％爲單位混合相對大小和絕對像素。
• 執行我的代碼，它會正常工作。

p.s.如果它不顯示在一行中，不要忘記將結果窗口移動到左側。