如何在 html/css 中浮动 div 包装器？

Question

我有一个包装器中的垂直导航栏。它工作正常，但我的其余内容在它下面。我希望 Vert Narbar 位于左侧，宽度可能为 20%，内容位于右侧。我需要为页脚使用 Clear。

导航栏CSS[省略一些不必要的行]是：

div.wrapper {
  margin: 60px auto auto 8px;
  width: 220px;
}

p {
  /*4spaces*/
  font-family: georgia;
  font-size: 1rem;
  line-height: 25px;
  margin: 24px 0;
  text-align: center;
}

nav.vertical {
  border-radius: 14px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .15);
  overflow: hidden;
  text-align: center;
}

nav.vertical>ul {
  list-style-type: none;
}

nav.vertical>ul>li {
  display: block;
}

nav.vertical>ul>li>a {
  background-color: rgb(157, 34, 60);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
  text-transform: uppercase;
  transition: all .35s ease;
  /*4spaces */
}

nav.vertical>ul>li>a:hover {
  background-color: rgb(114, 51, 98);
  cursor: pointer;
}

nav.vertical>ul>li>div {
  background-color: rgb(255, 255, 255);
}

nav.vertical>ul>li>div>ul {
  list-style-type: none;
}

nav.vertical>ul>li>div>ul>li>a {
  background-color: rgb(255, 255, 255);
  border-bottom: 1px solid rgba(0, 0, 0, .05);
  color: #333331;
  display: block;
  font-size: 1.1rem;
  padding: 10px 0;
  text-decoration: none;
  transition: all 0.35s linear;
}

nav.vertical>ul>li>div>ul>li:hover>a {
  background-color: lightBlue;
  color: rgb(255, 255, 255);
  padding: 10px 0 10px 50px;
}

<!-- 4 spaces  -->
<div class="wrapper">
  <nav class="vertical">
    <ul>
      <li>
        <a href="#">Category 1</a>
        <div>
          <ul>
            <li><a href="#">item 1</a></li>
            <li><a href="#">item 2</a></li>
            <li><a href="#">item 3</a></li>
          </ul>
        </div>
        <!-- 4 spaces  -->
      </li>
      <li>
        <a href="#">Category 2</a>
        <div>
          <ul>
            <li><a href="#">item 1</a></li>
            <li><a href="#">item 2</a></li>
            <li><a href="#">item 3</a></li>
          </ul>
        </div>
      </li>
    </ul>
  </nav>
  <!-- 4 spaces  -->
</div>
<div style="padding-left:20px">
  <h1>Website Content Stuff</h1>

</div>

<!--  main content -->
<p>Ipsorum pro loekum text that we all hate</p>

我应该提一下，我从 Adam-Bray 在线获得了 Navbar 代码

Answer 1

您必须在 .wrapper div 上添加一个浮动元素，因为它是一个块元素，所以它占据整个宽度并将内容移动到它下面

如何在 html/css 中浮动 div 包装器？

How float a div wrapper in html/css?

html

css

css-float