一個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中作爲最終父元素，請設置爲此屬性，那麼它將無法實現所需的流程