Question

我在word press上使用二十二个主题并且使用标签（或任何其他标头标签）有问题;它使所有文本在特定div中消失。

我可以使用，但想知道为什么会这样。

如果我将跨度更改为WP外的H2，它可以正常工作，因此我假设有一些问题。

我的代码：

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

    .productContainer a { 
        text-decoration: none; 
    }

    .productContainer:hover { 
        border-color: green; 
        opacity: .5; 
    }
    .productContainer a img, .productContainer a img p { 
        float: left; 
        display:block; 

    } 

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

    .productContainer p { 
        width: 500px; 
    text-align: left;
        text-decoration-line: none; 
        color: #A1c6E3; 
    font-size: 12px; 
    }
  .productContainer span {
        font-size: 24px; 
    margin-bottom 60px; 
}


 </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'/>
        <span> Rapid Worker </span>    
        <p>The Rapid Worker range is a versatile, sturdy range that will ensure that all your office needs are met. With a large range of desks, storage options, tables and much more you will be sure to find a solution that meets and exceeds your needs. </p>
<p>We will ensure that your new office furniture will be with you as soon as possible with all our range being shipped from our store within 7 Days ! </p>
</a>
</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'/>
        <span> Rapid Span</span>    
        <p>The Rapid Span range is for the person who wants to modernize and innovate. With clean white tops and funky bases, you are sure to inspire creativity        and productivity with the Rapid Span range. The range also includes various accessories such as storage units, pedestals and tables. </p>

<p>We will ensure that your new office furniture will be with you as soon as possible with all our range being shipped from our store within 7 Days! </p>
    </a>
</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'/>
        <span> Rapid Manager </span>    
        <p>The Rapid manager range is elegant, classy and high quality. It will ensure that people know who’s boss.  With Cherry Wood tops and Ironstone bases the      Rapid Manager range is for the discerning executive.</p>

<p>We will ensure that your new office furniture will be with you as soon as possible with all our range being shipped from our store within 7 Days! </p>
    </a>
</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'/>
        <span> Seating </span>    
        <p>Pacific Express’ Seating range is extensive! Whether you want one chair or a hundred we can assist. We stock a vast range of seating options ranging from operational (desk) chairs through to visitor and lounge seating. We also know that comfort is imperative and as such we offer a range of AFRDI approved chairs. </p>

<p>We will ensure that your new office furniture will be with you as soon as possible with all our range being shipped from our store within 7 Days! </p>
    </a>
</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'/>
        <span> Steel Storage</span>    
        <p>Pacific Express’ offers a range of Steel storage units. All units are sturdy, long lasting, and cost effective.</p>
        <p>As per usual all items will be with you as soon as possible with all our range being shipped from our store within 7 Days!</p>
    </a>
</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'/>
        <span> Screens</span>    
        <p>Pacific Express’ offers a range of Screens.  These screens are either floor standing or attached to a desk.</p>
        <p>As per usual all items will be with you as soon as possible with all our range being shipped from our store within 7 Days!</p>
    </a>
</div>

网站页面为http://pacificexpress.com.au/products/

谢谢

詹姆斯

Answer 1

发生了什么是CSS问题 - h2标记（和其他标题标记）是块级元素，默认情况下，清除浮动。在您的情况下，跨度起作用，因为它不清除浮动，并且在产品图像旁边内嵌。但是一个h2清除了它 - 所以从技术上来说，h2和它下面的所有文本仍然存在，它们只是被推到图像下方并被包含div的高度隐藏。

您可以通过将其添加到样式

来解决此问题

.productContainer h2 { clear: none; }

在Wordpress中显示标题标记的问题

1 个答案: