文章/答案/技术大牛

发布

社区首页 >问答首页 >在响应模式中停止“逐步降级”效果

问在响应模式中停止“逐步降级”效果
EN

Stack Overflow用户

提问于 2018-02-20 00:25:24

回答 1查看 41关注 0票数 1

我在一个WordPress站点的侧边栏中对齐3组图像和文本时遇到了麻烦。我已经创建了一个自定义的CSS类来浮动图像，就像我想让附带的文本环绕图像一样，使用：

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

这在桌面模式下工作得很好：

但在响应模式下，我会得到图像重新对齐的渐变效果：

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

这是我的代码(也可以在JSBin上找到)：

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

<!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>

wordpress

html

css

回答 1

Stack Overflow用户

发布于 2018-02-28 03:27:35

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

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

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

.textwidget p:nth-child(2n) {
  clear:both;
}

<!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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/48870233

复制

相似问题

问在响应模式中停止“逐步降级”效果
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在响应模式中停止“逐步降级”效果EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在响应模式中停止“逐步降级”效果
EN