HTML/CSS -如何不规则地对齐多个图像

sqserrrh  于 2024-01-09  发布在  其他
关注(0)|答案(2)|浏览(114)

什么是最好的方式来实现这个设计与图像-每一个放置在一个包括标题。是的,它应该是响应.以某种方式与网格也许?
x1c 0d1x的数据
我尝试了浮动左/右(我讨厌,但它变得复杂)
[Some更多人物……]

pb3s4cty

pb3s4cty1#

最好的选择是使用Flexbox,这里有一个你想要的例子:

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.content {
  margin: 10px;
}

.content img {
  height: 40px;
  border: 1px solid #333;
  display: block;
}

个字符
你可以在这里阅读更多关于flexbox:Basic concepts of flexbox - CSS

sg24os4d

sg24os4d2#

是的,理想的方法是使用网格.这个codepen也许你正在寻找:
Irreguler Image Gallery
然而,你也可以使用flexbox,但最后你必须为每个图像设置宽度和高度,并使用边距不规则地移动它们。

.gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  row-gap: 12em;
  column-gap: 2em;
  margin: 0;
  padding: 0;
  list-style: none;
}

字符串

相关问题