!代码：页面布局

http://www.cnblogs.com/depsi/p/5097013.html　　CSS两列及三列自适应布局方法整理　　2015-1-4

 

 

多列：

<style type="text/css">
html,body{margin:0;padding:0;}
.main{width:1190px;margin-left:0;margin-right:0;min-height:1000px;background:#000;}
.product {position:relative;float:left;background:#fff;margin:0 20px 20px 0;overflow:visible;}
.product:nth-child(4n) {margin-right:0;}
.iwrap {position:relative;width:280px;height:300px;background:#fff;margin:0;padding:0;border:1px solid #ececec;box-sizing:content-box;}
</style>
<div class="main">
    <div class="product"><div class="iwrap">1111</div></div>
    <div class="product"><div class="iwrap">22222</div></div>
    <div class="product"><div class="iwrap">3333</div></div>
    <div class="product"><div class="iwrap">4444</div></div>
    <div class="product"><div class="iwrap">1111</div></div>
    <div class="product"><div class="iwrap">22222</div></div>
    <div class="product"><div class="iwrap">3333</div></div>
    <div class="product"><div class="iwrap">4444</div></div>
</div>

 

多列红框：

<style type="text/css">
html,body{margin:0;padding:0;}
.main{width:1190px;margin-left:0;margin-right:0;min-height:1000px;background:#999;}
.product {position:relative;float:left;background:#fff;width:282px;height:333px;margin-right:20px;margin-bottom:20px;line-height:1.5;overflow:visible;z-index:1;}
.product:nth-child(4n) {margin-right:0;}
.product:hover{overflow:visible;z-index:3;}
.product:hover .iwrap {
    margin:-3px;
    border:4px solid #f83760;
    -webkit-transition:border-color .2s ease-in;
    -moz-transition:border-color .2s ease-in;
    -ms-transition:border-color .2s ease-in;
    -o-transition:border-color .2s ease-in;
    transition:border-color .2s ease-in;
}
.iwrap {position:relative;width:280px;height:331px;background:#fff;margin:0;padding:0;border:1px solid #ececec;box-sizing:content-box;}
</style>
<div class="main">
    <div class="product"><div class="iwrap">1111</div></div>
    <div class="product"><div class="iwrap">22222</div></div>
    <div class="product"><div class="iwrap">3333</div></div>
    <div class="product"><div class="iwrap">4444</div></div>

    <div class="product"><div class="iwrap">1111</div></div>
    <div class="product"><div class="iwrap">22222</div></div>
    <div class="product"><div class="iwrap">3333</div></div>
    <div class="product"><div class="iwrap">4444</div></div>
</div>

 

 

 

...