HTML / CSS错放了标题和丢失的图像

Question

我遇到一个小问题，我正在处理的网站上放错了几个标题，并且还有一个图像应该显示在每个标题下方。 你可以在这里看到我在说什么：

这是我的HTML：

<!-- main-content -->
<div id="main-content">    
    <h1> Check out all our DEADicated sites: </h1>
    <div class="sites">
        <a href="http://www.thedeadicated.tumblr.com" target="_blank">
        <img src="images/sites/tumblr.jpg" width="215" height="150" alt="Tumblr"/></a>
        <p> Tumblr </p>
    </div>
    <div class="sites">
        <a href="http://www.twitter.com/thedeadicated" target="_blank">
        <img src="images/sites/twitter.jpg" width="215" height="150" alt="Twitter"/></a>
        <p> Twitter </p>
    </div>
    <div class="sites">     
        <a href="http://www.youtube.com/user/DeadicatedRepository" target="_blank">
        <img src="images/sites/youtube.jpg" width="215" height="150" alt="YouTube"/></a>
        <p> YouTube </p>
     </div>

    <h2> To join TheDEADicated, click <a href="http://musichype.com/artists/dead-sara" target="_blank">HERE</a>! </h2>
    <h2> To get your own DEADicated wristband, click <a href="http://store.cinderblock.com/the-deadicated-rubber-bracelet.html" target="_blank">HERE</a>! </h2>
    <h2> Can't get enough of Dead Sara?! <a href="http://www.facebook.com/pages/Dead-Sara-Addiction-Treatment-facility/337823746314667?group_id=0" target="_blank">Dead Sara Addiction Treatment Facility</a> </h2>
    <h2> Email us at: TheDEADicated@TheDEADicated.org </h2>

</div> <!-- close main-content -->

这是主要内容＆amp;的CSS代码。头：

#main-content{
    padding: 50px 50px 30px 50px;
    background: #fff url('images/shadow.png') repeat-x;
    min-height: 800px;
}

#main-content h2{
    margin-top: 30px;
    padding-bottom: 8px;
    background: url('images/ink-line.png') no-repeat left bottom;
    clear: both;
}

任何形式的帮助将不胜感激。谢谢！

Answer 1

评论是正确的，你不清楚你应该看到什么，但不是，但如果我正确地解释你的意思是“我的标题没有显示我期望的边距和填充或背景图像”

我将采取另一种信念的飞跃来提供可能的解决方案。我明白了

</div> <!-- close main-content -->

在你的HTML结尾但我在任何地方都看不到<div id="main-content>。它应该位于页面的顶部，或者在h2s块之前，这取决于您希望结果如何。尝试在第一个h2标记之前添加<div id="main-content>，看看是否能为您解决此问题。

编辑：我现在更清楚地看到您的问题，但如果没有实时网址检查，这很难解决。它可能是一个浮动问题，但明确应解决这个问题，除非它被覆盖，所以你可以改为：

clear: both !important;

这可能是显示问题，请尝试添加：

h2 { display: block !important; }

如果有一个确实有用的实时网址。最后的想法是确保整个页面html中的每个标记都正确打开和关闭。根据我的经验，冗余或未关闭的div可能会导致类似这样的问题。

Answer 2

我无法确切地知道这里发生了什么，但是猜测标题上方的元素是如何看的，我会说你有浮动问题。尝试从h2中删除“clear：both”并添加“float：left; width：100％;”取而代之。