Question

我有一个HTML文件。如您所见，如果您单击图像，则会在下方打开一个带有文本的框。这适用于jQuery。有没有办法将图像下方的图像推下来？因此盒子永远不会覆盖图像。请注意，它应该是响应。

Here's小提琴：

那是css：

#projekte {
    list-style: none;
    text-align: center;
    width: 100%;
}

#projekte li {
    display: inline-block;
    margin: 10px 5px 10px 5px;
    width: 300px;
}

#projekte img {cursor: pointer; width: 300px;}

.beschreibung {
    background-color: #bec3c8;
    display: none;
    width: 100%;
    left: 0;
    position: absolute;
}

Answer 1

不要使.beschreibung元素绝对定位，因为这将使它们脱离文档流。将您的CSS更改为：

.beschreibung {
    background-color: #bec3c8;
    display: none;
    width: 100%;
}

Updated fiddle（注释中所述的vertical-align：top）

Answer 2

您必须将位置参数更改为 relative

.beschreibung {
    background-color: #bec3c8;
    display: none;
    left: 0;
    position: relative;
}

使用 jQuery ，您可以设置宽度，例如：

jQuery(".beschreibung").width("desired width");

EXAMPLE FIDDLE

此外，您需要隐藏以前的图像说明，例如： -

$("div[id^='projekt']").hide();

Answer 3

您可以更改CSS类position: relative

.beschreibung {
    background-color: #bec3c8;
    display: none;
    width: 100%;
    left: 0;
    position: relative;
}

Answer 4

所以我找到了一个简单的解决方案。我只是将.beschreibung放入换行div并将.beschreibung设置为100％宽度。您可以在此处找到更新：https://jsfiddle.net/znt3npqa/9/

出现<div>应该将图像向下推

4 个答案: