html - 导航栏被以下文本覆盖

Question

我有一个带有 img 和导航栏的简单标题。我想让导航栏出现在 img 下方（这就是发生的情况），但是导航栏显示在以下文本后面。我不知道如何获取导航栏下方的文本并停止覆盖它（已经尝试清除）。

我想提一下我是新来的，所以我可以看起来很简单。

精彩的 jsfiddle 链接：http: //jsfiddle.net/k2qQN/

然后这是我的html：

<

header role="banner">
        <img src="../assets/images/autologo.png" alt="A and B automotive logo" />
        <nav role="navigation">
            <ul>
                <li><a href="#about-us/about-us.html">Services</a></li>
                <li><a href="#getting-in-touch">Getting in Touch</a></li>
                <li><a href="about-the-shop/about-the-shop.html">About Us</a></li>
            </ul>
        </nav>
    </header>
    <div role="main">
        <section id="services" title="Small overview of service">
            <h1>Title for content</h1>
            <p> At <a href="getting-in-touch">Some shop</a> Some random text following infoome random text following infoome random text following infoome random text following infoome random text following infoome random text following infoome random text following infoome random text following infoome random text following infoome random text following info</p>

        </section>

这是CSS：

    html, body, #container {
    height: 100%;
    width: 100%;
    border: 1px solid black;
    font-size: 1.1em;
    }

header {
    height: 20%;
    width: 100%;
    }

img {
    height: 100%;
    width: auto;
    }

Answer 1

标题内的图像使用标题的所有高度。因此，要么使用此 CSS 更改图像的高度：

header img {
    height:123px; /* or another value smaller than the header's height of 100% */
}

或者不设置标题的高度：

header {
    width:100%;
}

Answer 2

给role="main"上边距的 div。首先给它一个 id 或 class，以便您可以更轻松地引用它，然后执行以下操作：

#main-div {
    margin-top: 100px;
}

Answer 3

header 有height:20%，这就是它与下面的 div 重叠的原因。使img高度为max-height:100%和标题为height:auto

header {
    height:auto;
    width: 100%; 
    }

img {
    max-height: 100%;
    width: auto;
    }

演示

Answer 4

这是因为您的标题具有固定的高度。导航溢出，但内容没有被下推。要么让标题采用它需要的高度，要么overflow: hidden;在其上设置以隐藏溢出的内容。