时间戳

首页 > 解决方案 > 如何在 html/css 中浮动 div 包装器？

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

问题描述

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

Navbar 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 获得了在线导航栏代码

标签： htmlcsscss-float

解决方案

您必须在您的.wrapperdiv 上添加一个浮点数，因为它是一个块元素，因此它占据整个宽度并将其下方的内容移动

推荐阅读