分享模板插件精品好资源
现在位置:首页 > 网站设计 > html如何让一行显示5张图片(代码怎么写)

html如何让一行显示5张图片(代码怎么写)

作者:蓝叶 分类:网站设计 时间:2022-12-03 浏览:772

在做页面设计布局时,为了美观好看,都会采用一些图片列表的布局来展示一些列表内容,这时我们就需要一行显示5张图片或其他数量的图片,那么html如何让一行显示5张图片?代码怎么写?

html如何让一行显示5张图片.png

html如何让一行显示5张图片?

一行显示多张图片,我们可以使用cssfloat属性来进行浮动布局,这是老方法这里就不说了,今天蓝叶分享的是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>

免责声明:

本页网址:点击复制分享给朋友吧!

本站分享的一切内容资源如若没有备注,均为蓝叶原创,如需转载请注明出处;如有侵权请与我们联系处理。敬请谅解!

评论列表
挤眼亲亲咆哮开心想想可怜糗大了委屈哈哈小声点右哼哼左哼哼疑问坏笑赚钱啦悲伤耍酷勾引厉害握手耶嘻嘻害羞鼓掌馋嘴抓狂抱抱围观威武给力
提交评论

清空信息
关闭评论