Question

我想在this page上的6张图片的底部添加一些文字。

有HTML：

<div class="entry-content">
  <div class="onesixth">
    <figure id="attachment_165" aria-labelledby="figcaption_attachment_165" class="wp-caption alignnone" style="width: 164px"><a href="/services/bookkeeping-services"><img class="wp-image-165 size-medium" title="Bookkeeping Services Perth" src="/wp-content/uploads/2016/05/Bookkeeping-380-164x300.jpg" alt="Bookkeeping Services Perth" width="164" height="300"></a>
      <figcaption id="figcaption_attachment_165" class="wp-caption-text">Bookkeeping Services Perth.</figcaption>
    </figure>
  </div>
  <div class="onesixth">
    <figure id="attachment_166" aria-labelledby="figcaption_attachment_166" class="wp-caption alignnone" style="width: 164px"><a href="/services/administration-support"><img class="wp-image-166 size-medium" src="/wp-content/uploads/2016/05/Bookkeeping-Support-380-164x300.jpg" alt="Bookkeeping Training &amp; Support" width="164" height="300"></a>
      <figcaption id="figcaption_attachment_166" class="wp-caption-text">Bookkeeping Training &amp; Support</figcaption>
    </figure>
  </div>
  <div class="onesixth">
    <figure id="attachment_167" aria-labelledby="figcaption_attachment_167" class="wp-caption alignnone" style="width: 164px"><img class="wp-image-167 size-medium" src="/wp-content/uploads/2016/05/Administration-380-164x300.jpg" alt="Administration Support Services Perth" width="164" height="300">
      <figcaption id="figcaption_attachment_167" class="wp-caption-text">Administration Support Services Perth</figcaption>
    </figure>
  </div>
  <div class="onesixth">
    <figure id="attachment_168" aria-labelledby="figcaption_attachment_168" class="wp-caption alignnone" style="width: 164px"><a href="/services/hr-support"><img class="wp-image-168 size-medium" src="/wp-content/uploads/2016/05/HR-Support-380-1-164x300.jpg" alt="Human Resources Support and Services Perth" width="164" height="300"></a>
      <figcaption id="figcaption_attachment_168" class="wp-caption-text">Human Resources Support and Services Perth</figcaption>
    </figure>
  </div>
  <div class="onesixth">
    <figure id="attachment_169" aria-labelledby="figcaption_attachment_169" class="wp-caption alignnone" style="width: 164px"><a href="/services/website-enhancement-and-search-engine-optimisation"><img class="wp-image-169 size-medium" src="/wp-content/uploads/2016/05/website-seo&amp;enhancement-380-164x300.jpg" alt="website seo &amp; enhancement" width="164" height="300"></a>
      <figcaption id="figcaption_attachment_169" class="wp-caption-text">Website SEO &amp; Enhancement</figcaption>
    </figure>
  </div>
  <div class="onesixth">
    <figure id="attachment_170" aria-labelledby="figcaption_attachment_170" class="wp-caption alignnone" style="width: 164px"><a href="/services/occupational-health-safety"><img class="wp-image-170 size-medium" src="/wp-content/uploads/2016/05/Occupational-Health-and-Safety-380-164x300.jpg" alt="Occupational Health and Safety Services Perth" width="164" height="300"></a>
      <figcaption id="figcaption_attachment_170" class="wp-caption-text">Occupational Health and Safety Services Perth</figcaption>
    </figure>
  </div>
  <div class="clear"></div>
  <div class="onesixth">
    <p class="clear"><small>BAS Agent<br>
      Xero Partner<br>
      Member of the Institute of Bookkeepers</small></p>
  </div>
</div>

未清除图像的文本是：

<small>BAS Agent<br>
   Xero Partner<br>
   Member of the Institute of Bookkeepers</small>

CSS是：

.onesixth {width: 15%; float: left; margin-right: 1%; display: inline-block;}

.wp-caption.alignnone {
    margin: 1.25em 20px 20px 0;
}
.wp-caption{
   position: relative;
}
.wp-caption img,
.wp-caption-text{
   position: absolute;
}
.wp-caption img{
   top: 60px;
   left: 0px;
}
.wp-caption-text {
   top:0;
   min-height: 56px;
}
figure, figcaption, img {
    margin: 0;
}
.clear {clear: both;}

如何确保<div class="clear"></div>正上方正常工作？

或者，如何确保第一张图片下面显示<small>？

感谢。

Answer 1

.clear课程的CSS应该是这样的，

.clear:before,
.clear:after {
    content: " ";
    display: table;
}

.clear:after {
    clear: both;
}

Check this out for your reference

Answer 2

我在您的示例中为您提供的标记添加了一些测试<div>，其中显示<p>按照预期的方式运行。

NB 您仅需要将.onesixth { display: inline-block; float: left; margin: 6px 12px 6px 0; border: 1px solid rgb(255,0,0); } .onesixth, figure, figcaption, img { width: 164px; } figure, figcaption, img { margin: 0; } .clear { clear: both; }应用于该段落 - 您不需要在<div class="entry-content"> <div class="onesixth"> <figure id="attachment_165" aria-labelledby="figcaption_attachment_165" class="wp-caption alignnone" style="width: 164px"><a href="/services/bookkeeping-services"><img class="wp-image-165 size-medium" title="Bookkeeping Services Perth" src="/wp-content/uploads/2016/05/Bookkeeping-380-164x300.jpg" alt="Bookkeeping Services Perth" width="164" height="300"></a> <figcaption id="figcaption_attachment_165" class="wp-caption-text">Bookkeeping Services Perth.</figcaption> </figure> </div> <div class="onesixth"> <figure id="attachment_166" aria-labelledby="figcaption_attachment_166" class="wp-caption alignnone" style="width: 164px"><a href="/services/administration-support"><img class="wp-image-166 size-medium" src="/wp-content/uploads/2016/05/Bookkeeping-Support-380-164x300.jpg" alt="Bookkeeping Training & Support" width="164" height="300"></a> <figcaption id="figcaption_attachment_166" class="wp-caption-text">Bookkeeping Training & Support</figcaption> </figure> </div> <div class="onesixth"> <figure id="attachment_167" aria-labelledby="figcaption_attachment_167" class="wp-caption alignnone" style="width: 164px"><img class="wp-image-167 size-medium" src="/wp-content/uploads/2016/05/Administration-380-164x300.jpg" alt="Administration Support Services Perth" width="164" height="300"> <figcaption id="figcaption_attachment_167" class="wp-caption-text">Administration Support Services Perth</figcaption> </figure> </div> <div class="onesixth"> <figure id="attachment_168" aria-labelledby="figcaption_attachment_168" class="wp-caption alignnone" style="width: 164px"><a href="/services/hr-support"><img class="wp-image-168 size-medium" src="/wp-content/uploads/2016/05/HR-Support-380-1-164x300.jpg" alt="Human Resources Support and Services Perth" width="164" height="300"></a> <figcaption id="figcaption_attachment_168" class="wp-caption-text">Human Resources Support and Services Perth</figcaption> </figure> </div> <div class="onesixth"> <figure id="attachment_169" aria-labelledby="figcaption_attachment_169" class="wp-caption alignnone" style="width: 164px"><a href="/services/website-enhancement-and-search-engine-optimisation"><img class="wp-image-169 size-medium" src="/wp-content/uploads/2016/05/website-seo&enhancement-380-164x300.jpg" alt="website seo & enhancement" width="164" height="300"></a> <figcaption id="figcaption_attachment_169" class="wp-caption-text">Website SEO & Enhancement</figcaption> </figure> </div> <div class="onesixth"> <figure id="attachment_170" aria-labelledby="figcaption_attachment_170" class="wp-caption alignnone" style="width: 164px"><a href="/services/occupational-health-safety"><img class="wp-image-170 size-medium" src="/wp-content/uploads/2016/05/Occupational-Health-and-Safety-380-164x300.jpg" alt="Occupational Health and Safety Services Perth" width="164" height="300"></a> <figcaption id="figcaption_attachment_170" class="wp-caption-text">Occupational Health and Safety Services Perth</figcaption> </figure> </div> <p class="clear"><small>BAS Agent<br> Xero Partner<br> Member of the Institute of Bookkeepers</small></p> </div>之前添加.htaccess {1}}。

＆＃13;

users

＆＃13;

users.php

＆＃13;

Answer 3

您实际上可以使用clear:both，或者您可以将所有图像div（.onesixth）括在父div（.fixit）

中

<div class="entry-content">
  <div class="fixit">
  <div class="onesixth">
    <figure id="attachment_165" aria-labelledby="figcaption_attachment_165" class="wp-caption alignnone" style="width: 164px"><a href="/services/bookkeeping-services"><img class="wp-image-165 size-medium" title="Bookkeeping Services Perth" src="/wp-content/uploads/2016/05/Bookkeeping-380-164x300.jpg" alt="Bookkeeping Services Perth" width="164" height="300"></a>
      <figcaption id="figcaption_attachment_165" class="wp-caption-text">Bookkeeping Services Perth.</figcaption>
    </figure>
  </div>
  <div class="onesixth">
    <figure id="attachment_166" aria-labelledby="figcaption_attachment_166" class="wp-caption alignnone" style="width: 164px"><a href="/services/administration-support"><img class="wp-image-166 size-medium" src="/wp-content/uploads/2016/05/Bookkeeping-Support-380-164x300.jpg" alt="Bookkeeping Training &amp; Support" width="164" height="300"></a>
      <figcaption id="figcaption_attachment_166" class="wp-caption-text">Bookkeeping Training &amp; Support</figcaption>
    </figure>
  </div>
  <div class="onesixth">
    <figure id="attachment_167" aria-labelledby="figcaption_attachment_167" class="wp-caption alignnone" style="width: 164px"><img class="wp-image-167 size-medium" src="/wp-content/uploads/2016/05/Administration-380-164x300.jpg" alt="Administration Support Services Perth" width="164" height="300">
      <figcaption id="figcaption_attachment_167" class="wp-caption-text">Administration Support Services Perth</figcaption>
    </figure>
  </div>
  <div class="onesixth">
    <figure id="attachment_168" aria-labelledby="figcaption_attachment_168" class="wp-caption alignnone" style="width: 164px"><a href="/services/hr-support"><img class="wp-image-168 size-medium" src="/wp-content/uploads/2016/05/HR-Support-380-1-164x300.jpg" alt="Human Resources Support and Services Perth" width="164" height="300"></a>
      <figcaption id="figcaption_attachment_168" class="wp-caption-text">Human Resources Support and Services Perth</figcaption>
    </figure>
  </div>
  <div class="onesixth">
    <figure id="attachment_169" aria-labelledby="figcaption_attachment_169" class="wp-caption alignnone" style="width: 164px"><a href="/services/website-enhancement-and-search-engine-optimisation"><img class="wp-image-169 size-medium" src="/wp-content/uploads/2016/05/website-seo&amp;enhancement-380-164x300.jpg" alt="website seo &amp; enhancement" width="164" height="300"></a>
      <figcaption id="figcaption_attachment_169" class="wp-caption-text">Website SEO &amp; Enhancement</figcaption>
    </figure>
  </div>
  <div class="onesixth">
    <figure id="attachment_170" aria-labelledby="figcaption_attachment_170" class="wp-caption alignnone" style="width: 164px"><a href="/services/occupational-health-safety"><img class="wp-image-170 size-medium" src="/wp-content/uploads/2016/05/Occupational-Health-and-Safety-380-164x300.jpg" alt="Occupational Health and Safety Services Perth" width="164" height="300"></a>
      <figcaption id="figcaption_attachment_170" class="wp-caption-text">Occupational Health and Safety Services Perth</figcaption>
    </figure>
  </div>
  </div>
  <p><small>BAS Agent<br>
    Xero Partner<br>
    Member of the Institute of Bookkeepers</small></p>
</div>

并将以下CSS应用于.fixit

.fixit:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
    .fixit{display:inline-block;clear:both;}
    * html .fixit{height:1%;}
    .fixit{display:block;}

CSS：如何清除浮动

3 个答案: