一个p标签

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但它们内部的元素将在successsive线。 注意，内联块工作只有当使用此属性的元素在另一个块级元素内。因此，如果您试图将div包含在p或两个或更多个div中作为最终父元素，请设置为此属性，那么它将无法实现所需的流程