用圖片和文字

CSS對準我有這樣的事情：用圖片和文字

<li> 
       <div class=""> 
        <a href="http://www.youtube.com/watch?v=1111" target="_blank"> 
         <img src="http://img.youtube.com/vi/1111/default.jpg" /> 
        </a><a href="http://www.youtube.com/watch?v=1111" target="_blank"> 
         <h6>abcd</h6> 
        </a> 
        <p> 
         1234 views 
        </p> 
       </div> 
</li> 
//multiple li like above inside ul

我想要實現像在YouTube上的相關視頻效果，與左邊的圖像和文字出現在它們的圖像的右側（並且不在圖像下流動） - 如何完成？如： enter image description here

感謝

來源

2012-02-05 raklos

@Scott，我試了很多變化。與內聯塊，垂直對齊圖像頂部，但它不是我想要如何工作。 – raklos 2012-02-05 20:50:59

嘗試使用浮動[像這樣]（http://jsfiddle.net/E5PcK/5/）。 – 2012-02-05 20:49:59

花車和利潤都可以在這裏你的朋友。例如：

<style type="text/css"> 
.videoitem { 
    height:90px; 
    margin-bottom:15px; 
} 
.image { 
    float:left; 
    margin-right:10px; 
} 
</style> 

      <div class="videoitem"> 
       <a href="http://www.youtube.com/watch?v=1111" target="_blank"> 
        <img class="image" src="http://img.youtube.com/vi/1111/default.jpg" /> 
       </a><a href="http://www.youtube.com/watch?v=1111" target="_blank"> 
        <h6>abcd</h6> 
       </a> 
       <p> 
        1234 views 
       </p> 
      </div> 
      <div class="videoitem"> 
       <a href="http://www.youtube.com/watch?v=1111" target="_blank"> 
        <img class="image" src="http://img.youtube.com/vi/1111/default.jpg" /> 
       </a><a href="http://www.youtube.com/watch?v=1111" target="_blank"> 
        <h6>abcd</h6> 
       </a> 
       <p> 
        1234 views 
       </p> 
      </div>

來源

2013-02-28 15:19:37 Daveable

用圖片和文字

回答

相關問題