html - 如何在不影响周围其他DIV的情况下垂直扩展一个DIV?

标签 html css

<分区>

我正在尝试为图片库扩展一组给定 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>

我得到的结果: enter image description here

我想要的最终结果: enter image description here

我制作了 fiddle ,以便您可以更好地了解发生了什么:https://jsfiddle.net/537ayfwc/

我通过添加一个不可见的 DIV 找到了一个解决方法,它会在每 5 张图片之后充当分隔线,但我正在尝试找到一种没有它的方法,因为它为 future 的 javascript 动画添加了更多限制我想在整个画廊表演。

最佳答案

不确定这是否是您要找的。

.thumb{
  float:left;
  margin:5px;
}

#gallery{
  width:850px;
  display: flex;
  flex-wrap: wrap;
}

关于html - 如何在不影响周围其他DIV的情况下垂直扩展一个DIV?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53769372/

上一篇:html - 如何使该网站适合所有屏幕尺寸?

下一篇:css - 在 CSS 中使用 1 个 url 设置图像 Sprite

相关文章:

javascript - 如何在用鼠标单击时更改 anchor 的文本?

html - div 背景和媒体查询不适用于 chrome,但适用于 firefox + edge + opera + smartphone

javascript - 卡片翻转动画 Internet Explorer 11

c++ - Qt 中的背景乘以而不是适应窗口大小

javascript - 如何防止使用 Id 的特定选择器上的 CSS/JavaScript?

html - 客户端 : HTML, DOM 和 CSS?

javascript - 检查图像源是否等于图像

javascript - HTML5 Canvas : Change Image Color

javascript - 在 HTML/JavaScript 中减去两个数字

css - 如何获得具有属性的第一个 child (td)?