css - 一个 p 标签内有多个图像的 float 问题

Question

http://boythemovie.co.nz/wordpress/downloads-2

多亏了 WP 格式，带有标题的图像位于它们自己的 div 中，而其他的都在一个 <p> 中。标签。

我想要的是所有图片，无论有没有字幕，都流畅流畅。

现在我有:

HTML - 我无法更改:

<div style="width: 250px" class="wp-caption alignnone" id="attachment_158">
  <a href="http://boythemovie.co.nz/wordpress/wp-content/uploads/WaihauBay.jpg">
    <img width="240" height="159" alt="" src="http://boythemovie.co.nz/wordpress/wp-content/uploads/WaihauBay-240x159.jpg" title="WaihauBay" class="size-medium wp-image-158 ">
  </a>
  <p class="wp-caption-text">
    Caption text goes here
  </p>
</div>
<p>
  <a href="http://boythemovie.co.nz/wordpress/wp-content/uploads/1011.jpg">
    <img width="240" height="160" alt="" src="http://boythemovie.co.nz/wordpress/wp-content/uploads/1011-240x160.jpg" title="1011" class="alignnone size-medium wp-image-162">
  </a>
  <a href="http://boythemovie.co.nz/wordpress/wp-content/uploads/1062.jpg">
    <img width="240" height="159" alt="" src="http://boythemovie.co.nz/wordpress/wp-content/uploads/1062-240x159.jpg" title="1062" class="alignnone size-medium wp-image-164">
  </a>
  <a href="http://boythemovie.co.nz/wordpress/wp-content/uploads/1064.jpg">
    <img width="240" height="160" alt="" src="http://boythemovie.co.nz/wordpress/wp-content/uploads/1064-240x160.jpg" title="1064" class="alignnone size-medium wp-image-166">
  </a>
  <a href="http://boythemovie.co.nz/wordpress/wp-content/uploads/521.jpg">
    <img width="240" height="160" alt="" src="http://boythemovie.co.nz/wordpress/wp-content/uploads/521-240x160.jpg" title="521" class="alignnone size-medium wp-image-168">
  </a>
  <a href="http://boythemovie.co.nz/wordpress/wp-content/uploads/519.jpg">
    <img width="240" height="160" alt="" src="http://boythemovie.co.nz/wordpress/wp-content/uploads/519-240x160.jpg" title="519" class="alignnone size-medium wp-image-170">
  </a>
  <a href="http://boythemovie.co.nz/wordpress/wp-content/uploads/507.jpg">
    <img width="240" height="360" alt="" src="http://boythemovie.co.nz/wordpress/wp-content/uploads/507-240x360.jpg" title="507" class="alignnone size-medium wp-image-171">
  </a>
  <a href="http://boythemovie.co.nz/wordpress/wp-content/uploads/508.jpg">
    <img width="240" height="360" alt="" src="http://boythemovie.co.nz/wordpress/wp-content/uploads/508-240x360.jpg" title="508" class="alignnone size-medium wp-image-172">
  </a>
  <a href="http://boythemovie.co.nz/wordpress/wp-content/uploads/BOY_1.jpg">
    <img width="240" height="159" alt="" src="http://boythemovie.co.nz/wordpress/wp-content/uploads/BOY_1-240x159.jpg" title="BOY_1" class=" alignnone">
  </a>
  <a href="http://boythemovie.co.nz/wordpress/wp-content/uploads/BOY_3.jpg">
    <img width="240" height="311" alt="" src="http://boythemovie.co.nz/wordpress/wp-content/uploads/BOY_3-240x311.jpg" title="BOY_3">
  </a>
  <a href="http://boythemovie.co.nz/wordpress/wp-content/uploads/BOY_2.jpg">
    <img width="240" height="158" alt="" src="http://boythemovie.co.nz/wordpress/wp-content/uploads/BOY_2-240x158.jpg" title="BOY_2" class="alignnone size-medium wp-image-175">
  </a>
  <a href="http://boythemovie.co.nz/wordpress/wp-content/uploads/BOY_5.jpg">
    <img width="240" height="160" alt="" src="http://boythemovie.co.nz/wordpress/wp-content/uploads/BOY_5-240x160.jpg" title="BOY_5" class="alignnone size-medium wp-image-177">
  </a>
</p>

CSS:

.wp-caption {
    float: left;
}
#content img {
    float: left;
}

如果您能帮助理解 float 元素在这种情况下的工作原理，我们将不胜感激!

Answer 1

float 元素通常应该用于将文本环绕在特定元素周围，例如您的图像。根据我对你的问题的估计，你正在尝试为图像定位标题，以便其他图像的位置不受影响。

为什么不使用 display:inline-block 属性。以这种方式，您可以拥有大量这样的父 div 包含 n 个元素，而不会影响此 div 之外的元素的位置可以总结如下。

<div id="theGlobalDiv">

    <div id="withCaption" style="display:inline-block" >

       <img src="image.jpeg" />

      <p id="caption">Some caption inserted here</p>

  </div>

   <div id="withoutCaption" style="display:inline-block" >

     <img src="image2.jpeg" />

   </div>

</div>

因此，display:inline-block 将在一行中显示 withCaption 和 withoutCaption，但其中的元素将在连续的行上。 注意当使用此属性的元素位于另一个 block 级元素内时，内联 block 仅有效。因此，如果您尝试将 div 包含在 p 或两个或更多 div 中作为最终父元素，设置为该属性，则它将无法实现所需的流程