在做页面设计布局时,为了美观好看,都会采用一些图片列表的布局来展示一些列表内容,这时我们就需要一行显示5张图片或其他数量的图片,那么html如何让一行显示5张图片?代码怎么写?
html如何让一行显示5张图片?
一行显示多张图片,我们可以使用css的float属性来进行浮动布局,这是老方法这里就不说了,今天蓝叶分享的是css3的新方法flex属性,元素使用display:flex属性就可以使子元素并列显示,这个css3属性是非常香的,如果想要一样显示5张图片或者指定数量的图片,可以给父元素加个flex-wrap:wrap属性,之后在子元素css样式里固定下每个层的数值就可以了。
html一行显示5张图片代码怎么写?
下面蓝叶直接贴出代码,修改下图片地址,直接复制即可使用。
<style> .flex-wrap{width:800px;margin:0 auto;box-sizing:border-box} .flex-wrap ul{list-style:none;display:flex;flex-wrap:wrap;} .flex-wrap ul li{list-style:none;width:calc(20% - 5px);margin:0 5px 5px 0;} .flex-wrap ul li img{width:100%} </style> <div class="flex-wrap"> <ul> <li><img src="图片网址" /></li> <li><img src="图片网址" /></li> <li><img src="图片网址" /></li> <li><img src="图片网址" /></li> <li><img src="图片网址" /></li> <li><img src="图片网址" /></li> <li><img src="图片网址" /></li> <li><img src="图片网址" /></li> <li><img src="图片网址" /></li> <li><img src="图片网址" /></li> </ul> </div>
免责声明:
本页网址:点击复制分享给朋友吧!
本站分享的一切内容资源如若没有备注,均为蓝叶原创,如需转载请注明出处;如有侵权请与我们联系处理。敬请谅解!