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

为div赋予role="main"一个上边距。首先给它一个id或类，这样你就可以更容易地引用它，然后这样做：

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

Answer 3

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

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

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

<强> DEMO

Answer 4

这是因为你的标题有一个固定的高度。导航溢出但内容没有被推下。让标题获取所需的高度或在其上设置overflow: hidden;以隐藏溢出的内容。

导航栏包含以下文本

4 个答案: