1.頁面結構：

<div class="seckill-goods"><ul><li></li><li></li><li></li><li></li></ul></div> .seckill-goods li {width: 400px;height: 190px;background-color: #fff; }

在瀏覽器中的顯示效果！

?

1.1.

<div class="seckill-goods"><ul class="clearfix"><li></li><li></li><li></li><li></li></ul></div>

?

.seckill-goods ul {border: 1px solid black; } .seckill-goods li {float: left;width: 400px;height: 190px;background-color: #fff; } /*為了實現效果自己加的樣式*/ .clearfix{overflow:auto;_height:1% }

在瀏覽器中的顯示效果！

1.2.顯示空出來的間隙

.seckill-goods li {float: left;width: 400px;height: 190px;background-color: #fff;/*border: 1px solid black;*//*顯示空出來的間隙,右 下 */margin-right: 13px;margin-bottom: 13px; }.clearfix{overflow:auto;_height:1% }

在瀏覽器中的顯示效果！?

1.2.1去邊框：

.seckill-goods ul {margin-right: -13px;/*border: 1px solid black;*/ } .seckill-goods li {float: left;width: 400px;height: 190px;background-color: #fff;/* border: 1px solid black;*//*顯示空出來的間隙,右 下 */margin-right: 13px;margin-bottom: 13px; }.clearfix{overflow:auto;_height:1% }

在瀏覽器中的顯示效果！?

2.做文字提示：

<div class="seckill-goods"><ul class="clearfix"><li></li><li></li><li></li><li></li></ul></div><p>*小米閃購活動規則：小米閃購商品不享受該商品在小米商城其它優惠政策（包括但不限于優惠券、贈品、滿減等）<br>溫馨提示：因可能存在系統緩存、頁面更新導致價格變動異常等不確定情況出現，如果您發現活動商品價格或促銷商品有異常，請您立刻聯系小米客服，以便我們及時補正。</p>

在瀏覽器中的顯示效果！?

?

2.1.調整距離：

<ul class="clearfix"><li></li><li></li><li></li><li></li></ul></div><p class="seckill-notice">*小米閃購活動規則：小米閃購商品不享受該商品在小米商城其它優惠政策（包括但不限于優惠券、贈品、滿減等）<br>溫馨提示：因可能存在系統緩存、頁面更新導致價格變動異常等不確定情況出現，如果您發現活動商品價格或促銷商品有異常，請您立刻聯系小米客服，以便我們及時補正。</p> .seckill-notice {font-size: 12px;color: #999;margin-top: 100px;/*距底邊的距離*/padding-bottom: 35px; } .clearfix{overflow:auto;_height:1%}

在瀏覽器中的顯示效果！?

3.框的樣式：

<div class="seckill-goods"><ul class="clearfix"><li><div class="bg"></div><div class="info"></div></li></ul></div> .seckill-goods .bg {float: left;width: 190px;height: 190px;border: 1px solid red; } .seckill-notice {font-size: 12px;color: #999;margin-top: 100px;/*距底邊的距離*/padding-bottom: 35px; }

在瀏覽器中的顯示效果！?

3.1.

.seckill-goods .bg {float: left;width: 190px;height: 190px;border: 1px solid red; } .seckill-goods .info {margin-left: 210px;width: 190px;height: 190px;border: 1px solid black; }

?在瀏覽器中的顯示效果！

總結

以上是生活随笔為你收集整理的xx闪购-商品列表布局设计的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。