关于实现网店商品排列效果的问题

之前写了一个网店的页面，在商品排列的实现上是用列表来包裹，然后float每个li。这样的方法显然是直接简单的，但是产生了一个问题，当一行中每个li的高度不一致的时候，就会产生如下情况：

显然这不是我们想要的效果，下面的才是我们要的效果：

参考了网上的资料后找到了一个这样的跨浏览器解决方案（为了节省时间，大家可以只看li的样式就可以啦，其他的设置只是一些少少的调整而已）：

<ul>
    <li>
        <div>
            <img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg" alt="lobster" width="75" height="75" />
            <p>ddddddd</p>
        </div>
    </li>
    <li>
        <div>
            <img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg" alt="lobster" width="75" height="75" />
            <p>ddddddd uuuu iii pppp</p>
        </div>
    </li>
    <li>
        <div>
            <img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg" alt="lobster" width="75" height="75" />
            <p>ddddddd</p>
        </div>
    </li>
    <li>
        <div>
            <img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg" alt="lobster" width="75" height="75" />
            <p>ddddddd</p>
        </div>
    </li>
    <li>
        <div>
            <img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg" alt="lobster" width="75" height="75" />
            <p>ddddddd</p>
        </div>
    </li>
    <li>
        <div>
            <img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg" alt="lobster" width="75" height="75" />
            <p>ddddddd</p>
        </div>
    </li>
    <li>
        <div>
            <img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg" alt="lobster" width="75" height="75" />
            <p>ddddddd</p>
        </div>
    </li>
</ul>

ul {
    list-style-type:none;
    width:250px;
    height:auto;
    border:1px solid #000;
    margin:0;
    padding:0;
}
li {
    width:75px;
    min-height:95px;
    border:1px solid #000;
    vertical-align: top;
    display:inline-block;
    display: -moz-inline-stack;/*FF2不支持inline-block*/
    zoom: 1;/*激发IE的layout,实现IE的兼容*/
    *display: inline;/*zoom:1;*display:inline;可以让IE7实现inline-block的效果*/
    _height: 250px;/*IE6不支持min-height，把 _height(IE6 下划线 hack) 设为 250px 使所有的 <li> 元素高度为 250px，并且如果它们的内容大于 250px，他们会扩大来适应。其他所有的浏览器会忽略 _height。*/
}
p {
    word-wrap:break-word;
    margin:0;
    padding:0;
}

 

 

转载于:https://www.cnblogs.com/joyho/articles/2990667.html