Question

我有漂浮物的问题。我想要一个带有导航和文本的侧边栏，但是文本在导航下面。我也尝试过漂浮而且清晰明确。

我做错了什么？

body {
  margin: 0;
  padding: 0;
  background-color: #93ece7;
}
.Wrapper {
  position: relative;
  width: 1200px;
  height: 1000px;
  overflow: auto;
  margin: auto;
  background-color: white;
}
.Header {
  margin: 0;
  background-color: #aaa;
  color: #fff;
}
.Header h1 {
  margin: 0px;
  padding: 10px 0px 10px 0px;
  text-align: center;
}
.Header p {
  text-align: center;
  position: relative;
  bottom: 25px;
  font-size: 90%
}
.nav {
  position: absolute;
  top: 71.9px;
  left: -39.9px;
  float: right;
}
.nav ul {
  list-style: none;
  float: right;
}
.nav ul li {} .nav ul li a {
  text-decoration: none;
  color: black;
  display: block;
  background-color: #aaa;
  padding: 10px;
  t;
}
.nav ul li a:hover {
  background-color: #999;
  color: white;
}
.nav ul li span {
  display: block;
  padding: 10px;
  font-size: 104%;
  background-color: #999;
}
.content {
  clear: both;
}

<!--start wrapper-->
<div class="Wrapper">

  <!--start header-->
  <div class="Header">
    <header>
      <h1>Tam &amp; Ils</h1>
      <p>knutselen en freubelen met tam &amp; ils</p>
    </header>
  </div>
  <!--end header-->

  <!--start nav-->
  <div class="nav">

    <nav>
      <ul>
        <li><span>Menu</span></li>
        <li><a href="#">Over ons</a></li>
        <li><a href="#">Social Media</a></li>
        <li><a href="#">Contact</a></li>
        <li><span>Producten</span></li>
        <li><a href="#">Ringen</a></li>
        <li><a href="#">Kettingen</a></li>
        <li><a href="#">Tassen</a></li>
        <li><a href="#">Freubles</a></li>
        <li><span>Tutorials</span></li>
        <li><a href="#">Ring Maken</a></li>
        <li><a href="#">Ketting Technieken</a></li>
        <li><a href="#">Tassen Hakken</a></li>
      </ul>
    </nav>
  </div>
  <!--end nav-->

  <!--start content-->
  <div class="content">
    <main>
      <span>welkom op onze website</span>
      <p>welkom op deze website wij zij gek van kunstelen, freubelen en vooral lachen. OP deze website kun je dingen kopen en leren hoe je dingen die wij maken kunt maken</p>
    </main>
  </div>
  <!--end content-->

  <!--start footer-->
  <div class="footer">
    <footer>
      <p>copyright &copy; 2016 Youri Claes</p>
    </footer>
  </div>
  <!--end footer-->

</div>
<!--end wrapper-->

这是HTML 这是CSS。

其他一些重要信息：

编辑：括号
系统：赢7 浏览器：谷歌浏览器

Answer 1

您的代码存在许多问题，但有一些注意事项：

我建议像这样创建一个jsFiddle演示：https://jsfiddle.net/azizn/o28zLgr6/
当您将position:absolute应用于元素时，浮动变得无关紧要，元素将失去位置，使其与其他元素重叠。
无需设置应该是动态的容器高度（高度将根据内容自动生成）
如果您想要两列布局，建议将两个列包装在容器内，这是最基本的结构

<强> CSS

.wrapper { overflow:auto; }
.content { float:right; width:80%;}
.sidebar { float:left: width:20%; }

<强> HTML

<div class="wrapper">
  <div class="sidebar">
    ...
  </div>
  <div class="content">
    ...
  </div>
</div>

请注意，边距和填充会破坏布局，因为它们会增加总宽度，因此请尝试避免这些或添加box-sizing:border-box;

总结

这是您网站的固定版本，其中包含解释已更改内容及其原因的注释：

https://jsfiddle.net/azizn/o28zLgr6/1/

由于您没有将.content和.sidebar包装在一个容器中，因此我使用具有clear:both属性的div清除了浮点数。

内容落后于导航

1 个答案:

总结