多商品展示.png

需求：實現電商的多商品展示效果。

知識點：圖片垂直居中vertical-align:middle;，浮動膀钠。

<div class="box">
    <div>
        <h1><img src="images/jd.jpg" alt=""><span></span></h1>
        <h2>電腦手機鍵盤鼠標鼠標墊</h2>
        <h3>￥10000.00</h3>
    </div>
    <div>
        <h1><img src="images/jd.jpg" alt=""><span></span></h1>
        <h2>電腦手機鍵盤鼠標鼠標墊</h2>
        <h3>￥10000.00</h3>
    </div>
    <div>
        <h1><img src="images/jd.jpg" alt=""><span></span></h1>
        <h2>電腦手機鍵盤鼠標鼠標墊</h2>
        <h3>￥10000.00</h3>
    </div>
    <div>
        <h1><img src="images/jd.jpg" alt=""><span></span></h1>
        <h2>電腦手機鍵盤鼠標鼠標墊</h2>
        <h3>￥10000.00</h3>
    </div>
    <div>
        <h1><img src="images/jd.jpg" alt=""><span></span></h1>
        <h2>電腦手機鍵盤鼠標鼠標墊</h2>
        <h3>￥10000.00</h3>
    </div>
    <div>
        <h1><img src="images/jd.jpg" alt=""><span></span></h1>
        <h2>電腦手機鍵盤鼠標鼠標墊</h2>
        <h3>￥10000.00</h3>
    </div>
    <div>
        <h1><img src="images/jd.jpg" alt=""><span></span></h1>
        <h2>電腦手機鍵盤鼠標鼠標墊</h2>
        <h3>￥10000.00</h3>
    </div>
    <div>
        <h1><img src="images/jd.jpg" alt=""><span></span></h1>
        <h2>電腦手機鍵盤鼠標鼠標墊</h2>
        <h3>￥10000.00</h3>
    </div>
    <div>
        <h1><img src="images/jd.jpg" alt=""><span></span></h1>
        <h2>電腦手機鍵盤鼠標鼠標墊</h2>
        <h3>￥10000.00</h3>
    </div>
    <div>
        <h1><img src="images/jd.jpg" alt=""><span></span></h1>
        <h2>電腦手機鍵盤鼠標鼠標墊</h2>
        <h3>￥10000.00</h3>
    </div>
</div>

*{
    margin: 0;padding: 0
}
html{
    background: #EEF3FA
}
.box{
    width: 1000px;
    height: 480px;
    background: #fff;
    margin: 100px auto
}
.box>div{
    width: 200px;
    height: 240px;
    border: 1px solid #ccc;
    float: left;
    box-sizing: border-box
}
h1{
    border-bottom: 1px solid #ccc;
    text-align: center;
    width: 200px;
    height: 180px
}
span{
    display: inline-block;
    width: 0;height: 100%;
}
img,span{
    vertical-align: middle
}
h2,h3{
    font-size: 12px;
    width: 200px;
    height: 30px;
    text-indent: 10px;
    line-height: 30px;
}
h3{
    color: red
}