Wordpress覆盖范围

Question

上传此css＆amp; html到运行二十二个主题的Wordpress网站，我的垂直向下运行我的div。我无法弄清楚为什么或如何解决这个问题。

查看链接为http://www.pacificexpress.com.au/products

的问题

<style> 
    .productContainer {
        border: 1px solid black; 
        width: 900px; 
        height: 305px; 
        margin: 0 auto; 
        overflow: hidden;
        margin-bottom: 10px;
    }

    .productContainer a img, .productContainer a img h2 p { 
        float: left; 
        display:block; 
        margin-bottom: -40px;
    } 

    .productContainer a img { 
        height: 300px; 
        width: 300px; 
        margin-right: 15px; 
    } 


    .productContainer p { 
        vertical-align: middle; 
        text-decoration-line: none; 
        color: #A1c6E3; 
    }

    .productContainer span {
        font-size: 24px; 
    }


</style>
<div class='productContainer'>
    <a href='http://pacificexpress.com.au/rapid-worker/'>
        <img src='http://i105.photobucket.com/albums/m215/furnxfurniture/Photobucket%20Desktop%20-%20Jamess%20MacBook%20Air/Furnx%20Images/Front%20Page%20Images/BowFrontDesk_pacificexpresscopy_zps7e8dc151.jpg'/>
            <p><span> Rapid Worker <br/> </span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p></a></li>
</div>

<div class='productContainer'>
    <a href='http://pacificexpress.com.au/?p=975'>
        <img src='http://i105.photobucket.com/albums/m215/furnxfurniture/Photobucket%20Desktop%20-%20Jamess%20MacBook%20Air/Furnx%20Images/Front%20Page%20Images/Corner_work_station_zps644dc92c.jpg'/>
            <p><span> Rapid Span<br/>  </span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p></a></li>

</div>
<div class='productContainer'>
    <a href='http://pacificexpress.com.au/?p=971'>
        <img src='http://i105.photobucket.com/albums/m215/furnxfurniture/Photobucket%20Desktop%20-%20Jamess%20MacBook%20Air/Furnx%20Images/Front%20Page%20Images/corner_workstationcopy_zps1ff2c6b7.jpg'/>
            <p><span> Rapid Manager<br/>  </span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p></a></li>
</div>
<div class='productContainer'>
    <a href='http://pacificexpress.com.au/?p=978'>
        <img src='http://i105.photobucket.com/albums/m215/furnxfurniture/Photobucket%20Desktop%20-%20Jamess%20MacBook%20Air/Furnx%20Images/Front%20Page%20Images/chair_mesh_am100_zps582ba090.jpg'/>
            <p><span> Seating <br/> </span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p></a></li>
</div>
<div class='productContainer'>
    <a href='http://goo.gl/M1nY2j'>
        <img src='http://i105.photobucket.com/albums/m215/furnxfurniture/Photobucket%20Desktop%20-%20Jamess%20MacBook%20Air/Furnx%20Images/Front%20Page%20Images/tamboor_cupboard_zps0e8c0f6c.jpg'/>
            <p><span> Steel Storage <br/> </span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p></a></li>
</div>

<div class='productContainer'>
    <a href='http://pacificexpress.com.au/?p=982'>
        <img src='http://i105.photobucket.com/albums/m215/furnxfurniture/Photobucket%20Desktop%20-%20Jamess%20MacBook%20Air/Furnx%20Images/Front%20Page%20Images/Screen_zps64d2ea85.jpg'/>
            <p><span> Screens<br/>  </span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p></a></li>
</div>

谢谢

詹姆斯

Answer 1

我检查了使用的CSS：

.entry-content p {
    display: inline-flex;
    float: left;
}

删除属性display：inline-flex;从上面你将获得所需的输出。

.entry-content p {
        /*display: inline-flex;*/
        float: left;
    }

Answer 2

请遵循以下html结构，在p标签之外占用范围

<div class='productContainer'>
    <a href='http://pacificexpress.com.au/rapid-worker/'>
        <img src='http://i105.photobucket.com/albums/m215/furnxfurniture/Photobucket%20Desktop%20-%20Jamess%20MacBook%20Air/Furnx%20Images/Front%20Page%20Images/BowFrontDesk_pacificexpresscopy_zps7e8dc151.jpg'/>
            <span> Rapid Worker</span>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p></a>
</div>