Question

我的标题元素在主页中干扰了我的元素时出现问题。我能描述这个问题的最好方法就是告诉你这里是我的代码。

<header class="cf">

    <div class="container cf">

        <div class="brand">

            <a href="#">Logo</a>

        </div>

        <ul class="main_nav cf">

            <li><a href="#">DISCOVER</a></li>
            <li><a href="#">STORE</a></li>

        </ul>

    </div>

</header>

<div class="main cf">

    <div class="album_hero">

        <div class="album_hero_inner cf">

            <div class="album_cover"><img src="http://cdn.doandroidsdance.com/assets/2013/10/daft-ram-cover.jpg" alt=""></div>
            <div class="album_cover"><img src="http://cdn.doandroidsdance.com/assets/2013/10/daft-ram-cover.jpg" alt=""></div>
            <div class="album_cover"><img src="http://cdn.doandroidsdance.com/assets/2013/10/daft-ram-cover.jpg" alt=""></div>
            <div class="album_cover"><img src="http://cdn.doandroidsdance.com/assets/2013/10/daft-ram-cover.jpg" alt=""></div>
            <div class="album_cover"><img src="http://cdn.doandroidsdance.com/assets/2013/10/daft-ram-cover.jpg" alt=""></div>
            <div class="album_cover"><img src="http://cdn.doandroidsdance.com/assets/2013/10/daft-ram-cover.jpg" alt=""></div>

        </div>

    </div>

</div>

正如您所看到的，在标题徽标完成之前，专辑封面似乎会跳过。此外，当删除徽标时，主要内容似乎自我修复。任何建议都将不胜感激。

谢谢你，欢迎进一步的问题。

Answer 1

header {
  width: 100%;
  background: rgba(0, 0, 0, 0.2);
  height: 60px;
  line-height: 60px;
  display: inline-block; <-- add this
  vertical-align: middle; <-- add this
}

Answer 2

通过添加display：block;在标题中。它将高度推到62px，其中标题的设定高度为60px。

CSS Clearfix不清除标头

2 个答案: