请问各位大佬,要在一个最大宽度的容器里实现多行,在换行时这个容器自适应内容宽度,?

请问各位大佬,要在一个最大宽度的容器里实现多行,在换行时这个容器自适应内容宽度,?


阅读全文
请先 登录 后评论
  • 0 关注
  • 0 收藏 84 浏览
  • 略问用户 提出于 2020-10-22 17:37:28

13 个回答

xxxxxa
给父级一个display:flex 再设置justify-content:space between(around) 前者使两边的元素紧贴着父级边框 后者与父级边框有一定的距离 但同一行的元素都是等间距分布 具体你可以试一下看看区别(子元素需要设置宽度)
请先 登录 后评论
xxxxxa
flex
请先 登录 后评论
xxxxxa
试试inline-flex
请先 登录 后评论
xxxxxa
父布局设为 display: inline; 可以宽度自适应子元素。但是父布局的高度就有坑了。
请先 登录 后评论
xxxxxa
各位谢谢了,我再描述一遍吧,里面的红色方块是从左到右排列的,然后会自动换行,space-between和space-around只能是强行将红块之间的间隔撑开然后达到最大宽度,这里要的是简单的从左到右排列换行,如果第四个红块不能装在第一行的剩余宽度里,就换行,并且父容器宽度往里缩自适应第一行三个红块加起来的宽度,好像只能用js去改了?。
请先 登录 后评论
xxxxxa
使用宽度百分比布局即可
请先 登录 后评论
xxxxxa
max-width: min-content,试试这个?
请先 登录 后评论
xxxxxa
那就是你得div如果是必须自适应宽度就好做,否则就要使用js操作dom
请先 登录 后评论
xxxxxa
伪类选择器➕js判断宽度
请先 登录 后评论
xxxxxa
今天刚刚遇到这个问题 利用伪类可以解决这个问题。 //scss .warp{ justify-content:space-between ; &:after{ width:60px; height:60px; content:' '; margin:3px; } }
请先 登录 后评论