蓝叶

青春是一个充满活力的季节,即便是我们失去了天使的翅膀,只要我们还有一颗青春的心,那么我们的生活依然能够如阳光般灿烂!......
现在位置:首页 > 网站设计 > html如何让一行显示5张图片(代码怎么写)

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

蓝叶    网站设计    2022-12-03    146    0评论    

在做页面设计布局时,为了美观好看,都会采用一些图片列表的布局来展示一些列表内容,这时我们就需要一行显示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>
评论一下 分享本文 赞助蓝叶

赞助蓝叶X

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

清空信息
关闭评论
加载中....
快捷导航 返回顶部
付费服务
音乐欣赏
友情链接
保存桌面
给我留言
返回顶部