如何在彼此之上显示div？

你好 Sta，欢迎来到 Stack Overflow。您的代码有几个问题会导致重叠：

• 不清除浮动元素 ( float: left;)
• 给出固定的宽度和高度
• 以百分比表示的宽度不允许三列（广告）并排放置
• 使用负边距 ( margin-top: -140px !important;)

很难给你一个简单的答案来解决你所有的问题。

这里有一些提示：

• 在容器内使用浮动元素时，使用 a<br style="clear:both">来确保高度和宽度计算得到纠正。浮动元素从文档流中移除，导致其父容器不考虑浮动子元素的高度和宽度
• 而不是固定宽度，使用（如果需要）a min-width: 100px;（100 作为示例值）以允许更多元素在一行中。最好的办法是使用柔性盒一起flex-wrap: wrap;定义数据的列

混合position: relative;,float: left;和等规则margin-top: -140px;通常是糟糕的 GUI 设计的标志。我建议首先使用尽可能少的 CSS 设计一个包含所有信息的框，然后在第二步中检查这些框中的几个如何彼此相邻。

更新 1：

为了让您了解它的外观，请查看此Codepen。基本上，我们将列表设置为占据总宽度的 20%，但如果有剩余空间，则会扩展到可用宽度。

这是我使用的剩余 CSS：

.awpcp-listings {
  display: flex;
  flex-wrap: wrap;
}

.awpcp-listing-excerpt 
{
  min-width: 20%;
  margin-right: 15px;
  box-shadow: 0 8px 16px #888888 !important;
  border-style: solid;
  color: grey;
  border-radius: 4px;
  margin-bottom: 10px;
  flex-grow: 2;
}

.awpcp-listing-excerpt-inner {
  min-width: 140px;
  min-height: 200px;
}
.awpcp-listing-excerpt-content {
  display: none;
}

.awpcp-listing-title {
  font-size: 10px;
  padding: 5px;
  text-align: left;
  background-color: yellow;
}
.awpcp-listing-excerpt-extra {
  margin-left: 20px;
}

顺便说一句，总是尽量避免，!important因为这会使覆盖变得不可能。而是尝试在您的规则定义中更加明确。

简短示例：

您有一个<div class="special">This is red</div>匹配的 CSS 规则来将 DIV 着色为黄色，这将是：

div {
  background-color: yellow;
}

但是如果你想让它变成红色，你可以更精确地添加规则：

div.special {
  background-color: red;
}

如果您发现某个元素不符合您的 CSS 规则，请使用开发人员工具（大多数浏览器中为 F12）并单击“检查元素”，然后选择需要更改的元素。然后，您将看到应用于该对象的所有 CSS 规则，然后匹配您的 CSS 规则以使用完全相同的规则覆盖这些规则。这需要你的CSS文件被加载后在以前的文件中加载。

更新 2：

首先，更改以下 CSS 规则以使您的项目显示在列中。所有注释规则意味着这些规则应该从样式表中删除。

/* Inline #51 | https://adsler.co.uk/browse-adsler/ */

.awpcp-listing-excerpt {
  min-width: 32%;
  /* float: left; */
  /* flex-grow: 2; */
}

.awpcp-listing-excerpt-extra {
  /* height: 50%; */
}

/* awpcpstyle.css | https://adsler.co.uk/wp-content/plugins/another-wordpress-classifieds-plugin/resources/css/awpcpstyle.css?ver=3.9.5 */

.awpcp-listing-excerpt-small .awpcp-listing-excerpt-thumbnail, .awpcp-listing-excerpt-medium .awpcp-listing-excerpt-thumbnail {
  /* float: left; */
}

.displayaditemseven {
  /* width: 100%; */
}

.awpcp-listing-excerpt-medium .awpcp-listing-excerpt-thumbnail {
  /* width: auto; */
}

.displayaditemsodd {
  /* width: 100%; */
}

/* so-css-shapely.css | https://adsler.co.uk/wp-content/uploads/so-css/so-css-shapely.css?ver=1557474259 */

.awpcp-listing-excerpt-extra {
  /* height: 0px; */
}

第二步，将媒体查询添加到您的样式表，以便在屏幕尺寸小于 900 像素时仅显示两列。

@media (max-width: 900px) {
  .awpcp-listing-excerpt {
    min-width: 46%;
  }
}