Css3 列表佈局 兩列或者多列布局整理
Css佈局多列,寬度自適應
一、float + border-box + 寬度百分比處理 (推薦)
寬度百分比,自動換行到下一列。
此方式推薦,重點兼容性高。
案例1:
css代碼:
.list { background: rgb(250, 213, 180); } .list .item { float: left; box-sizing: border-box; border: 1px solid red; width: 25%; padding: 10px 10px; } .list img { width: 100%; } .list .title { padding: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .clear { clear: both; }
html代碼:
<div class="list"> <div class="item"> <div class="img"> <img src="http://img.jnqianle.cn/upload/images/202012/03/f1742056-906a-44c6-ad4b-8bff21ba02c5.jpg" alt=""> </div> <div class="title"> Css3 列表佈局 兩列或者多列布局整理 </div> </div> <div class="item"> <div class="img"> <img src="http://img.jnqianle.cn/upload/images/202012/03/f1742056-906a-44c6-ad4b-8bff21ba02c5.jpg" alt=""> </div> <div class="title"> Css3 列表佈局 兩列或者多列布局整理 </div> </div> <div class="item"> <div class="img"> <img src="http://img.jnqianle.cn/upload/images/202012/03/f1742056-906a-44c6-ad4b-8bff21ba02c5.jpg" alt=""> </div> <div class="title"> Css3 列表佈局 兩列或者多列布局整理 </div> </div> <div class="item"> <div class="img"> <img src="http://img.jnqianle.cn/upload/images/202012/03/f1742056-906a-44c6-ad4b-8bff21ba02c5.jpg" alt=""> </div> <div class="title"> Css3 列表佈局 兩列或者多列布局整理 </div> </div> <div class="item"> <div class="img"> <img src="http://img.jnqianle.cn/upload/images/202012/03/f1742056-906a-44c6-ad4b-8bff21ba02c5.jpg" alt=""> </div> <div class="title"> Css3 列表佈局 兩列或者多列布局整理 </div> </div> <div class="item"> <div class="img"> <img src="http://img.jnqianle.cn/upload/images/202012/03/f1742056-906a-44c6-ad4b-8bff21ba02c5.jpg" alt=""> </div> <div class="title"> Css3 列表佈局 兩列或者多列布局整理 </div> </div> <!-- 清除浮動 --> <div class="clear"></div> </div>
顯示效果:
案例2,增加item-inner 對列表項,進行更豐富的效果處理
css代碼:
.list { background: rgb(241, 204, 172); } .list .item { float: left; box-sizing: border-box; border: 0px solid red; width: 50%; padding: 10px 10px; } .list .item-inner { background: white; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3); border-radius: 10px; overflow: hidden; } .list img { width: 100%; } .list .title { padding: 5px; } .clear { clear: both; }
html代碼:
<div class="list"> <div class="item"> <div class="item-inner"> <div class="img"> <img src="http://img.jnqianle.cn/upload/images/202012/03/f1742056-906a-44c6-ad4b-8bff21ba02c5.jpg" alt=""> </div> <div class="title"> Css3 列表佈局 兩列或者多列布局整理 </div> </div> </div> <div class="item"> <div class="item-inner"> <div class="img"> <img src="http://img.jnqianle.cn/upload/images/202012/03/f1742056-906a-44c6-ad4b-8bff21ba02c5.jpg" alt=""> </div> <div class="title"> Css3 列表佈局 兩列或者多列布局整理 </div> </div> </div> <div class="item"> <div class="item-inner"> <div class="img"> <img src="http://img.jnqianle.cn/upload/images/202012/03/f1742056-906a-44c6-ad4b-8bff21ba02c5.jpg" alt=""> </div> <div class="title"> Css3 列表佈局 兩列或者多列布局整理 </div> </div> </div> <div class="clear"></div> </div>
顯示效果:
案例3. 使用margin-left:-10px; margin-right:-10px;+overflow 擴大內容區域,並隱藏超出實現兩端對齊。
css代碼:
.container { border: 1px solid green; overflow: hidden; } .list { background: rgb(250, 213, 180); margin-left: -5px; margin-right: -5px; } .list .item { float: left; box-sizing: border-box; border: 0px solid red; width: 50%; padding: 10px 5px; } .list .item-inner { background: white; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3); border-radius: 5px 5px 10px 10px; overflow: hidden; } .list img { width: 100%; } .list .title { padding: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .clear { clear: both; }
html代碼:
<div class="container"> <div class="list"> <div class="item"> <div class="item-inner"> <div class="img"> <img src="http://img.jnqianle.cn/upload/images/202012/03/f1742056-906a-44c6-ad4b-8bff21ba02c5.jpg" alt=""> </div> <div class="title"> Css3 列表佈局 兩列或者多列布局整理 </div> </div> </div> <div class="item"> <div class="item-inner"> <div class="img"> <img src="http://img.jnqianle.cn/upload/images/202012/03/f1742056-906a-44c6-ad4b-8bff21ba02c5.jpg" alt=""> </div> <div class="title"> Css3 列表佈局 兩列或者多列布局整理 </div> </div> </div> <div class="item"> <div class="item-inner"> <div class="img"> <img src="http://img.jnqianle.cn/upload/images/202012/03/f1742056-906a-44c6-ad4b-8bff21ba02c5.jpg" alt=""> </div> <div class="title"> Css3 列表佈局 兩列或者多列布局整理 </div> </div> </div> <div class="item"> <div class="item-inner"> <div class="img"> <img src="http://img.jnqianle.cn/upload/images/202012/03/f1742056-906a-44c6-ad4b-8bff21ba02c5.jpg" alt=""> </div> <div class="title"> Css3 列表佈局 兩列或者多列布局整理 </div> </div> </div> <div class="item"> <div class="item-inner"> <div class="img"> <img src="http://img.jnqianle.cn/upload/images/202012/03/f1742056-906a-44c6-ad4b-8bff21ba02c5.jpg" alt=""> </div> <div class="title"> Css3 列表佈局 兩列或者多列布局整理 </div> </div> </div> <div class="item"> <div class="item-inner"> <div class="img"> <img src="http://img.jnqianle.cn/upload/images/202012/03/f1742056-906a-44c6-ad4b-8bff21ba02c5.jpg" alt=""> </div> <div class="title"> Css3 列表佈局 兩列或者多列布局整理 </div> </div> </div> <!-- 清除浮動 --> <div class="clear"></div> </div> </div>
二、Flex 佈局處理
請參考下一篇
更多: