Question

目前，我有一个包含大量内容的clearfix。我左边有多组图像，右边有文字，每个图像下都有一个<hr />。唯一的问题是，有时我没有足够的文本来平衡图像，因此<hr />被拉入图像内联。我需要所有<hr />都没有clearfix，这可能吗？

这是我的clearfix：

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

<hr>

hr {
  margin-top: 3rem;
  margin-bottom: 3.5rem;
  border-width: 0;
  border-top: 3px dashed #cacaca;
}

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

我的<html>：

<div class="main-wrap">

<div class="clear-fix">
<h2>Title</h2>

<p class="content-image">
    <img src="http://example.jpg">
</p>

<h3>Title</h3>

<p>Example text.</p>
<hr />

<p><img src="http://example.png" /></p>

<h3>Example</h3>

<p>Lots of example text here.</p>

<hr />

这就是我的HTML现在的样子。

Answer 1

只需添加＆＃34;清除＆＃34;包含clear: both;的{{1}}的类：

（或将hr添加到clear: both;元素本身）

＆＃13;

hr

＆＃13;

img {
  float:left; 
}

.clearing {
  clear: both;
}

＆＃13;

是否可以用<hr />覆盖clearfix？

1 个答案: