CSS 部屬經驗-圖文列表樣式

樣式



HTML 結構

<ul class="Img2HList ClearIt">
  <li class="List Odd">
    <div class="Container">
      <strong class="Title">
        <a><span class="Image"><img src="圖片網址" /></span>標題文字</a>
      </strong>
      
      <!--其他相關資訊-->
      <p class="Info">描述文字</p>
      <div class="Meta">文字</div>
      <blockquote>文字</blockquote>
    </div>
  </li>
  <li class="List">
    <div class="Container">
      <strong class="Title">
        <a><span class="Image"><img src="圖片網址" /></span>標題文字</a>
      </strong>
      
      <!--其他相關資訊-->
      <p class="Info">描述文字</p>
      <div class="Meta">文字</div>
      <blockquote>文字</blockquote>
    </div>
  </li>
</ul>

CSS 設定

ul.Img2HList {
    margin: 1em 0;
    overflow: hidden;
}
ul.Img2HList li.List {
 position:relative;
    display: block;
    float: left;
    width: 49%;
    margin: 0 0 30px 0;
    font-size: 11px;
}
ul.Img2HList .Container {
    padding: 0 0 0 79px;
}
ul.Img2HList li.Odd {
    clear: left;
}
ul.Img2HList li.Odd .Container{
    margin-right: 30px;
}
ul.Img2HList strong.Title {
    display: block;
 font-size:1.1em;
    border-bottom: 1px solid #ccc;
}
ul.Img2HList strong.Title span.Image {
    float: left;
    margin: 0 0 0 -79px;
    cursor: pointer;
}

參考頁面：
Last.fm
Wacanai.com