<分区>
<分区>
我正在尝试为图片库扩展一组给定 DIV 中的一个 DIV,我遇到的问题是当我扩展特定的 DIV 时,所有下一个 DIV 都会受到影响并移动它们的位置,这会留下很大的空白空间我不想。
我在特定的 DIV 上尝试了以下 CSS 属性,但到目前为止都没有成功:
height: 250px;
margin-bottom: 100px;
CSS:
.thumb{
float:left;
margin:5px;
}
#gallery{
width:850px;
}
HTML :
<html>
<head>
<title>asd</title>
</head>
<body>
<div id="gallery">
<div class="thumb">
<img src="https://picsum.photos/155/155?image=0">
</div>
<div class="thumb">
<img src="https://picsum.photos/155/155?image=100">
</div>
<div class="thumb" style="height:250px;"> <!-- specific DIV to expand vertically !-->
<img src="https://picsum.photos/155/155?image=200">
</div>
<div class="thumb">
<img src="https://picsum.photos/155/155?image=350">
</div>
<div class="thumb">
<img src="https://picsum.photos/155/155?image=400">
</div>
<div class="thumb">
<img src="https://picsum.photos/155/155?image=500">
</div>
<div class="thumb">
<img src="https://picsum.photos/155/155?image=600">
</div>
<div class="thumb">
<img src="https://picsum.photos/155/155?image=700">
</div>
<div class="thumb">
<img src="https://picsum.photos/155/155?image=800">
</div>
<div class="thumb">
<img src="https://picsum.photos/155/155?image=900">
</div>
<div class="thumb">
<img src="https://picsum.photos/155/155?image=950">
</div>
<div class="thumb">
<img src="https://picsum.photos/155/155?image=990">
</div>
</div>
</body>
</html>
我制作了 fiddle ,以便您可以更好地了解发生了什么:https://jsfiddle.net/537ayfwc/
我通过添加一个不可见的 DIV 找到了一个解决方法,它会在每 5 张图片之后充当分隔线,但我正在尝试找到一种没有它的方法,因为它为 future 的 javascript 动画添加了更多限制我想在整个画廊表演。
最佳答案
不确定这是否是您要找的。p>
.thumb{
float:left;
margin:5px;
}
#gallery{
width:850px;
display: flex;
flex-wrap: wrap;
}
关于html - 如何在不影响周围其他DIV的情况下垂直扩展一个DIV?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53769372/