gpt4 book ai didi

jquery - 列中的图像对齐

转载 作者:行者123 更新时间:2023-11-28 13:42:55 24 4
gpt4 key购买 nike

我有一组图像使用下面的 CSS 对齐,但它们是从上到下放置的。如何将它们从左到右对齐?

换句话说:

1|2|3|4

5|6|7|8

对比

1|3|5|7

2|4|6|8

#photos {
line-height: 0;
-webkit-column-count: 5;
-webkit-column-gap: 0px;
-moz-column-count: 5;
-moz-column-gap: 0px;
column-count: 5;
column-gap: 0px;
}
#photos img {
width: 100% !important;
height: auto !important;
}

这是来自教程:http://css-tricks.com/seamless-responsive-photo-grid/

最佳答案

这取决于您要实现的目标。如果您真的坚持使用 HTML5,您应该考虑这样一个事实,即这并非在所有浏览器或所有浏览器版本中都有效。如果您只是想制作一个没有接缝的图像 block 并将它们堆叠成一行,请参阅以下内容。

  <style type="text/css">
#photos {
float:left;
width:800px;
}
.imageItem{
float:left;
}
</style>
</head>
<body>
<div id="photos">
<img class="imageItem" src="http://farm8.staticflickr.com/7136/7733019900_c671c8d393_m.jpg" />
<img class="imageItem" src="http://farm8.staticflickr.com/7136/7733019900_c671c8d393_m.jpg" />
<img class="imageItem" src="http://farm8.staticflickr.com/7136/7733019900_c671c8d393_m.jpg" />
<img class="imageItem" src="http://farm8.staticflickr.com/7136/7733019900_c671c8d393_m.jpg" />
<img class="imageItem" src="http://farm8.staticflickr.com/7136/7733019900_c671c8d393_m.jpg" />
<img class="imageItem" src="http://farm9.staticflickr.com/8426/7733031344_0762136432_m.jpg"/>
<img class="imageItem" src="http://farm9.staticflickr.com/8426/7733031344_0762136432_m.jpg"/>
<img class="imageItem" src="http://farm9.staticflickr.com/8426/7733031344_0762136432_m.jpg"/>
<img class="imageItem" src="http://farm9.staticflickr.com/8426/7733031344_0762136432_m.jpg"/>
<img class="imageItem" src="http://farm9.staticflickr.com/8426/7733031344_0762136432_m.jpg"/>
</div>
</body>

关于jquery - 列中的图像对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12204931/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com