Css3 列表布局 两列或者多列布局整理
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 布局处理
请参考下一篇
更多: