HTML＆CSS評論列表

Question

我試過編碼評論列表，其中頭像應該顯示在左側，名稱和評論應顯示在右側。任何幫助解決這個問題表示讚賞。

成果

期望的結果

HTML

<section> 
    <div class='friend'> 
     <h3>John Smith</h3> 
     <p>Just another comment</p> 
     <img src='http://media.dunkedcdn.com/assets/prod/13/700x0-5_p17o72pss9bbmvuspb1gl61ot23.jpg'> 
    </div> 
    <div class='friend'> 
     <h3>John Smith</h3> 
     <p>Just another comment</p> 
     <img src='http://media.dunkedcdn.com/assets/prod/13/700x0-5_p17o72pss9bbmvuspb1gl61ot23.jpg'> 
    </div> 
    <div class='friend'> 
     <h3>John Smith</h3> 
     <p>Just another comment</p> 
     <img src='http://media.dunkedcdn.com/assets/prod/13/700x0-5_p17o72pss9bbmvuspb1gl61ot23.jpg'> 
    </div> 
</section> 

CSS

body { 
    font: 14px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif; 
    color: #333; 
} 
    a { 
    color: #333; 
    text-decoration: none; 
    } 

    h1, h2, h3 { 
    font-weight: 400; 
    } 

    h1 { 
    font-size: 30px; 
    } 

    h2 { 
    font-size: 24px; 
    } 

    h3 { 
    font-size: 20px; 
    } 

    img { 
     height: auto; 
     width: 100%; 
    } 

    section { 
    padding: 30px 60px; 
    } 

    .friend img { 
    height: 70px; 
    width: 100px; 
    display: block; 
    } 

Answer 1

浮法您h3和p標籤的權利。

.friend h3, .friend p { 
    float: right; 
} 

替代地，先讓圖像浮動到左邊。

http://css-tricks.com/all-about-floats/

https://developer.mozilla.org/en-US/docs/Web/CSS/float

Answer 2

你想浮動添加到您的圖像
像

.friend img{ 
float:left; 
} 

這裏有一個fiddle

Answer 3

我會建議你使用inline-block的而不是在垂直阿里CSS的浮動gn，在這裏你可以看到結果：http://jsfiddle.net/gG5uv/3/。

.friend img { 
    height: 70px; 
    width: 100px; 
    display: inline-block; 
    vertical-align: top; 
} 
.friend .data { 
    display: inline-block; 
    vertical-align: top; 
} 

我還添加圖像和每個項目的個人數據之間的語義的分離產生具有data類div。

Answer 4

嘿你可以在這裏檢查你的解決方案http://jsbin.com/edit/637/。 只需對代碼進行一些更改即可。

HTML

<div class="friend"> 
    <img id ='friend-image' src='http://media.dunkedcdn.com/assets/prod/13/700x0-5_p17o72pss9bbmvuspb1gl61ot23.jpg'> 
       <div id="friend-bio"> 
        <h4>John Smith</h4> 
        <p>Just another comment</p> 
       </div> 
</div> 
<br> 
<div class="friend"> 
    <img id ='friend-image' src='http://media.dunkedcdn.com/assets/prod/13/700x0-5_p17o72pss9bbmvuspb1gl61ot23.jpg'> 
       <div id="friend-bio"> 
        <h4>John Smith</h4> 
        <p>Just another comment</p> 
       </div> 
</div> 
<br> 
<div class="friend"> 
    <img id ='friend-image' src='http://media.dunkedcdn.com/assets/prod/13/700x0-5_p17o72pss9bbmvuspb1gl61ot23.jpg'> 
       <div id="friend-bio"> 
        <h4>John Smith</h4> 
        <p>Just another comment</p> 
       </div> 
</div> 

和CSS

.friend #friend-image { 
    border: 1px solid #F0F2F8; 
    display: inline-block; 
    float: left; 
    height: 85px; 
    width: 84px; 
} 
#main #friend #friend-bio { 
    float: left; 
    font-size: 14px; 
    margin: -7px 0 0 20px; 
    width: 454px; 
} 
#main #friend #friend-bio h4 { 
    font-size: 18px; 
    font-weight: normal; 
    margin: 0 0 5px; 
}