Question

我一直在尝试找出如何并排显示我管理的div。下面的CSS几乎完美地工作。

.awpcp-listing-excerpt {
  width: 40%! important;
  height: 120px! Important;
  float: left! Important;
  margin-right: 15px! Important;
  margin-top: -30px!important;
}

.awpcp-listing-excerpt-inner {
  margin-right: 50px !important;
  margin: auto !important;
  margin-left: -50px !important;
  width: 140px !important;
  height: 300px !important;
  margin-top: -140px !important;
  box-shadow: 0 8px 16px #888888!important;
}

.awpcp-listing-excerpt-content {
  display: none;
}

.awpcp-listing-excerpt-thumbnail {
  margin-top: 40px! Important;
  margin-left: -7px!important;
}

.awpcp-listing-title {
  margin-top: 140px! Important;
  font-size: 10px;
  text-align: left! Important;
  background-color: yellow;
}

.awpcp-listing-excerpt-extra {
  margin-top: -100px !important;
  margin-left: 20px !important;
}

问题是，当我来展示第三个广告时，要并排重复两个广告的当前模式，这是行不通的。请参见示例页面。 https://adsler.co.uk/browse-adsler/

Answer 1

Hello Sta，欢迎来到Stack Overflow。您的代码存在几个导致重叠的问题：

不清除浮动元素（float: left;）
设置固定的宽度和高度
给出一个百分比宽度，该宽度不允许三列（广告）彼此相邻
使用负边距（margin-top: -140px !important;）

很难给您一个简单的答案，可以解决您所有的问题。

以下是一些提示：

在容器内使用浮动元素时，请使用<br style="clear:both">以确保校正了高度和宽度计算。浮动元素已从文档流中删除，导致其父容器没有考虑浮动子元素的高度和宽度
代替min-width: 100px;（如果需要），使用flex-wrap: wrap;（100作为样本值）来允许更多元素排成一行。最好是将flex box与position: relative;一起使用以定义数据列

诸如float: left;，margin-top: -140px;和.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; }之类的混合规则通常是不良GUI设计的标志。我建议先设计一个仅包含尽可能少的CSS的包含所有信息的盒子，然后在第二步中检查这些盒子中的几个盒子彼此相邻的位置。

更新1：

要让您了解它的外观，请选中此Codepen。基本上，我们将清单设置为占总宽度的20％，但会在剩余空间的情况下扩展为可用宽度。

这是我剩余的CSS：

!important

顺便说一句，请始终尝试避免使用<div class="special">This is red</div>，因为这将导致无法覆盖。而是尝试在规则定义中更明确。

简短示例：

您有一个div { background-color: yellow; }并匹配CSS规则，以将DIV着色为黄色，即：

div.special {
  background-color: red;
}

但是您希望它改为红色，所以您可以更加精确并添加规则：

/* 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; */
}

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

更新2：

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

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

第二步，将media query添加到样式表中，以在屏幕尺寸小于900像素时仅显示两列。

5/10/2019 3:13:44 PM           103 Information      The disconnect reason is 12   
.
.
.
5/10/2019 3:13:43 PM           228 Warning          Disconnect trace:CUMRDPConnection Disconnect trace:'calling spGfxPlugin->PreDisconnect()' in CUMRDPConnection::PreDisconnect at 4477 err=[0xc], Error code:0xC

如何在彼此上方显示div？

1 个答案: