Question

我无法在WordPress网站的侧边栏中对齐3组图片和文字。我创建了一个自定义CSS类来浮动图像，因为我希望附带的文本使用以下方式环绕图像：

.floatLeft{float:left; margin-right:5px}

这在桌面模式下工作正常：

Desktop Mode

但是当处于响应模式时，我会在图像重新对齐的情况下获得降级效果：

Stepdown in responsive mode

理想情况下，我希望图像保持左对齐，直到宽度太小，它们将按顺序重新对齐。我也用inline / inline-block样式搞砸了，但我没有运气。

这是我的代码（也可在JSBin上找到）：

＆＃13;

.floatLeft {
  float: left;
  margin-right: 5px;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>

  <div id="pgc-26-1-1" class="panel-grid-cell">
    <div id="panel-26-1-1-0" class="so-panel widget widget_text panel-first-child panel-last-child widgetopts-SO" data-index="2">
      <div class="textwidget">
        <h2 align: top>Key Messages</h2>
        <p><strong><img class="floatLeft alignnone wp-image-1754" src="https://placehold.it/225x281/" alt="" width="225" height="281" /></strong></p>
        <p><strong>Water</strong> is vital for drinking, growing crops and supporting industry. Most of us can reduce the amount of water that we waste, saving ourselves money, and benefiting rivers and internationally important wetlands. We also have the
          option
          <br /> to increase the amount of rainfall we capture or encourage it to go into the ground &#8211; using sustainable drainage systems &#8211; to replenish our vital groundwater aquifers.</p>
        <p><img class="floatLeft alignnone wp-image-1765" src="https://placehold.it/225x281/" alt="" width="225" height="281" /></p>
        <p><strong>Rivers and wetlands</strong> provide enjoyment for many people whether angling, canoeing, watching wildlife or enjoying picturesque views. Rivers receive our waste water and many have been modified for flood defence, milling and navigation
          purposes. There are opportunities in the upper, non-tidal areas to restore river reaches and even reconnect the floodplain &#8211; using low-cost techniques &#8211; where no flood risk to property occurs.</p>
        <p><img class="floatLeft alignnone wp-image-1766" src="https://placehold.it/225x281/" alt="" width="225" height="281" /></p>
        <p><strong>Land</strong> is essential for food and fuel, but it also provides other services to society including flood protection, freshwater provision, wildlife habitat and recreation. Managing land for these other services in targeted marginal
          locations, while supporting sustainable agriculture across the wider landscape, is the key to success.</p>
        <p>&nbsp;</p>
      </div>
    </div>
  </div>
</body>

</html>

＆＃13;

Answer 1

在看到您的代码后，您需要做的是确保图像不会共享相同的水平空间。为此，您可以执行clear:left或clear:both（正如我在问题评论中所建议的那样）。但是你不会将它们应用于图像本身，而是应用于包含它的p。

一种简单的方法是向包含图像的p添加一个类，并将clear:both添加到该类，这需要一些简单的HTML更改。如果您不想更改HTML，则可以选择包含图片的p，因为它们始终是父容器的偶数子项，因此您可以nth-child(2n)执行此操作：

＆＃13;

.floatLeft {
  float: left;
  margin-right: 5px;
  margin-bottom: 5px;
}

.textwidget p:nth-child(2n) {
  clear:both;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>

  <div id="pgc-26-1-1" class="panel-grid-cell">
    <div id="panel-26-1-1-0" class="so-panel widget widget_text panel-first-child panel-last-child widgetopts-SO" data-index="2">
      <div class="textwidget">
        <h2 align: top>Key Messages</h2>
        <p><strong><img class="floatLeft alignnone wp-image-1754" src="https://placehold.it/225x281/" alt="" width="225" height="281" /></strong></p>
        <p><strong>Water</strong> is vital for drinking, growing crops and supporting industry. Most of us can reduce the amount of water that we waste, saving ourselves money, and benefiting rivers and internationally important wetlands. We also have the
          option
          <br /> to increase the amount of rainfall we capture or encourage it to go into the ground &#8211; using sustainable drainage systems &#8211; to replenish our vital groundwater aquifers.</p>
        <p><img class="floatLeft alignnone wp-image-1765" src="https://placehold.it/225x281/" alt="" width="225" height="281" /></p>
        <p><strong>Rivers and wetlands</strong> provide enjoyment for many people whether angling, canoeing, watching wildlife or enjoying picturesque views. Rivers receive our waste water and many have been modified for flood defence, milling and navigation
          purposes. There are opportunities in the upper, non-tidal areas to restore river reaches and even reconnect the floodplain &#8211; using low-cost techniques &#8211; where no flood risk to property occurs.</p>
        <p><img class="floatLeft alignnone wp-image-1766" src="https://placehold.it/225x281/" alt="" width="225" height="281" /></p>
        <p><strong>Land</strong> is essential for food and fuel, but it also provides other services to society including flood protection, freshwater provision, wildlife habitat and recreation. Managing land for these other services in targeted marginal
          locations, while supporting sustainable agriculture across the wider landscape, is the key to success.</p>
        <p>&nbsp;</p>
      </div>
    </div>
  </div>
</body>

</html>

＆＃13;

停止＆＃39; stepdown＆＃39;在响应模式下的效果

1 个答案: