求一个图片平均分布样式

gudamzero 2023-09-14 11:07:03

希望css实现一个li平均分布的效果,基础要求是每行5列,第一列居左,最后一列居右,其他列的图片平均分布在剩余空间,图片与图片的间隔要是一样的。li数量不限。需要响应式适配,比如@media (max-width: 767px),我需要变更为一行3列,图片的大小也要跟着缩小。

html如下:

<div>
<ul>
  <li><a><img/></a></li>
<li><a><img/></a></li>
<li><a><img/></a></li>
<li><a><img/></a></li>
<li><a><img/></a></li>
<li><a><img/></a></li>
<li><a><img/></a></li>
<li><a><img/></a></li>
</ul>
</div>

 

...全文
6408 3 打赏 收藏 转发到动态 举报
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
Tx的练习题 2023-09-14
  • 打赏
  • 举报
回复

给div设置宽度和高度
然后

.ul_Class {
  display: flex;
  flex-wrap: wrap;
}
.li_Class {
  flex-basis: 20%;
  text-align: center;
}

gudamzero 2023-09-14
  • 举报
回复
@Tx的练习题 谢谢,但是你这样不行,太简单了,不过其实是我想复杂了,没把grid研究好,现在已经完美实现了。
gudamzero 2023-09-14
  • 举报
回复
@Tx的练习题 ``` ul { display: grid; justify-content: space-between; grid-template-columns: repeat(5, 192px); grid-row-gap: 40px; } li { width: 192px; height: 192px; background-color: red; } img { width: 100%; object-fit: cover; } ```

39,093

社区成员

发帖
与我相关
我的任务
社区描述
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。
社区管理员
  • HTML5社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧