用inline-block做產品展示頁並且擁有RWD效果

相信大家對於這樣的排版並不陌生，這是一個產品的展示頁，文章參考Randy Hoyt教你如何用inline-block來做設計排版，內容簡單易懂

首先先來認識一下「inline」、「block」、「inline-block」

display : inline

像<img>、<span>、<a>預設的display屬性是inline，在網頁上呈現時並不會換行，且不能設定「width」、 「height」 、 「background-image」

display : block

像<div>、<p>、<h1>預設的display屬性是block，只要碰到這類元素不管前後都會換行，且預設寬度為最大，但可以設定「width」、 「height」 、 「background-image」等值

display : inline-block

從字面上可以很清楚的知道，可以同時擁有inline不會換行的特性，還可以像block一樣設定「width」、 「height」 、 「background-image」等值

OK，接下來在寫HTML之前先用小畫家做一張尺寸為200*300的圖當作產品圖

 

图，略...

 

接著是HTML部分

<ul class="products">
    <li>
        <a href="#">
            <img src="a.jpg">
            <h4>內衣</h4>
            <p>$200.00</p>
        </a>
    </li>
    <li>
        <a href="#">
            <img src="a.jpg">
            <h4>冬天超級無敵霹靂保暖的阿爾卑斯山羊毛羽絨超薄大衣</h4>
            <p>$2.00</p>
        </a>
    </li><!-- more list items -->
</ul>

CSS部分

ul.products li {
    width: 200px;
    display: inline-block;
}

呈現如下

 

图，略...

 

全文：http://blog.rx836.tw/blog/inline-block-display-product-grid-view/