Question

我仍然很难理解花车。在下面的示例中，我试图清除“Header”的两侧，但仍然是嵌套在其父元素内的元素，即“.greenband”。你知道“p-greenband”和“botton”出现在“.greeenband”里面的解决方案是什么？另外，如何在不改变“填充顶部”的情况下将徽标和导航菜单放在同一行？有什么可以自动完成的吗？

     @charset "utf-8";
     /* CSS Document */
     body {
       font-family: 'Source Sans Pro', sans-serif;
     }
     .container {
       width: 80%;
       margin: 0 auto;
     }
     header {
       position: fixed;
       width: 100%;
       height: 60px;
       background-color: #000000;
       text-transform: uppercase;
     }
     header h2 {
       clear: left;
       color: #FFFFFF;
       float: left;
     }
     nav {
       float: right;
     }
     nav li {
       float: left;
       list-style: none;
       color: #6E6E6E;
       margin-left: 20px;
       font-size: 14px
     }
     .greenband {
       background-color: #7cc193;
       height: 160px;
     }
     #p-greenband {
       color: #FFFFFF;
     }

<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>

<header>
  <div class="container">
    <h2>Trunk Club</h2>
    <nav>
      <ul>
        <li>How it Works</li>
        <li>What to Expect</li>
        <li>Stylists</li>
        <li>Log In</li>
        <li>Get Started</li>
      </ul>
    </nav>
  </div>
</header>
<div class="greenband">
  <p id="p-greenband">Trunk club for Women in Here.</p>
  <button>Learn More</button>
</div>

Answer 1

您的标题位于fixed position中，然后它位于文档流之外，.greenband位于其下方。

向标题的padding添加一些height等于推送内容。

也许min-width对确保标题和链接保持并排是有用的吗？

您也可以查看box-sizing：）

Position:sticky;可以替代。

@charset "utf-8";
     /* CSS Document */
     body {
       font-family: 'Source Sans Pro', sans-serif;
     }
     .container {
       width: 80%;
       margin: 0 auto;
     }
     header {
       position: fixed;
       width: 100%;
       min-width:800px;/* ? needed */
       height: 60px;
       background-color: #000000;
       text-transform: uppercase;
     }
     header h2 {
       clear: left;
       color: #FFFFFF;
       float: left;
     }
     nav {
       float: right;
     }
     nav li {
       float: left;
       list-style: none;
       color: #6E6E6E;
       margin-left: 20px;
       font-size: 14px
     }
     .greenband {
       background-color: #7cc193;
       padding-top:60px; /* height of fixed header */
     }
     #p-greenband {
       color: #FFFFFF;
     }

<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>

<header>
  <div class="container">
    <h2>Trunk Club</h2>
    <nav>
      <ul>
        <li>How it Works</li>
        <li>What to Expect</li>
        <li>Stylists</li>
        <li>Log In</li>
        <li>Get Started</li>
      </ul>
    </nav>
  </div>
</header>
<div class="greenband">
  <p id="p-greenband">Trunk club for Women in Here.</p>
  <button>Learn More</button>
</div>

Answer 2

如果你想要一个固定的标题，我可以建议这样做，所以你不需要考虑标题的高度。

这也可以使不同屏幕尺寸的响应更快。

@charset "utf-8";
/* CSS Document */
body {
  font-family: 'Source Sans Pro', sans-serif;
}
html, body {
  margin: 0;
  height: 100%;
  font-family: 'Source Sans Pro', sans-serif;
}
.wrapper {
  display: flex;
  flex-direction: column;
  width: 80%;
  height: 100%;
  margin: 0 auto;
}
.container {
  clear: both;
}
header {
  flex: 0;
  background-color: #000000;
  text-transform: uppercase;
}
header h2 {
  color: #FFFFFF;
  float: left;
}
nav {
  float: right;
}
nav li {
  float: left;
  list-style: none;
  color: #6E6E6E;
  margin-left: 20px;
  font-size: 14px
}
.content {
  flex: 1;
  overflow: auto;
}
.greenband {
  background-color: #7cc193;
  height: 160px;
}
#p-greenband {
  margin-top: 0;
  color: #FFFFFF;
}

<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>

<div class="wrapper">
  <header>
    <div class="container">
      <h2>Trunk Club</h2>
      <nav>
        <ul>
          <li>How it Works</li>
          <li>What to Expect</li>
          <li>Stylists</li>
          <li>Log In</li>
          <li>Get Started</li>
        </ul>
      </nav>
    </div>
  </header>
  <div class="content">
    <div class="greenband">
      <p id="p-greenband">Trunk club for Women in Here.</p>
      <button>Learn More</button>
    </div>
  </div>
</div>

我怎样才能修复浮动的混乱？

2 个答案: