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;
}

在这种情况下理解浮动元素如何工作的任何帮助将不胜感激！

Answer 1

浮动元素通常应该用于围绕某个元素（例如图像）包装文本。根据我对您的问题的估计，您正在尝试为图像定位标题，以便不会干扰其他图像的位置。

为什么不使用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，但其中的元素将位于成功的行上。注意当使用此属性的元素位于另一个块级元素内时，内联块仅。因此，如果您尝试将div括在p或两个或更多div中作为最终父元素，设置为此属性，则无法实现所需的流

在一个p标签内浮动多个图像的问题

1 个答案: