html如何让一行显示5张图片(代码怎么写)
在做页面设计布局时,为了美观好看,都会采用一些图片列表的布局来展示一些列表内容,这时我们就需要一行显示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>
- 版权申明:此文如未标注转载均为本站原创,自由转载请表明出处《蓝叶》。
- 本文网址:https://lanye.org/web/1045.html
- 上篇文章:Parse error: syntax error, unexpected(错误解决方法)
- 下篇文章:2022年11月必应壁纸打包下载(蓝叶分享11月电脑高清必应壁纸下载)