Question

我正在进行单页网页设计，我希望使用带有＃的href来链接同一档案中的不同位置，所需的功能是在点击时移动到链接位置，这可以工作但是如果我向左浮动A，B divs，我不明白这一点，A和B div已经包含其他东西，但如果我不把浮动：留在CSS中，链接不起作用。那是为什么？

＆＃13;

#A,
#B {
  float: left;
}
.cont1 {
  width: 100%;
  height: 1500px;
  background-color: #2077a5;
  float: left;
}

＆＃13;

<div id="nav">
  <ul>
    <li><a href="#A">About</a>
    </li>
    <li><a href="#B">Portfolio</a>
    </li>
  </ul>
</div>

<div id="A">
  <div id="about" class="cont1">
    About page content goes here.
  </div>
</div>

<div id="B">
  <div id="portfolio" class="cont1">
    Portfolio page content goes here.
  </div>
</div>

＆＃13;

编辑：哇，这是一些快速的答案，非常感谢，我想我不被理解，我的问题是为什么如果我没有设置任何风格的A和B div链接不工作，不要他们自动扩展定位是样式定义div的容器？

Answer 1

如果您坚持使用float:left; #A和#B，请将clear:both;添加到该第一条规则，以使它们不在同一行开始（在这种情况下）当地的锚点没有任何意义）：

#A,
#B {
  float: left;
  clear: both;
}

http://codepen.io/anon/pen/NRRxGy

评论和编辑后的补充：

要尝试查看，请删除A和B的浮动（http://codepen.io/anon/pen/bwwEAr）并在开发人员工具中查看它：＃A和＆＃39; B的大小均为1406 x 0 （！）并且将处于相同的位置。

那是因为只包含浮动元素的DIV将没有＆＃34;官方＆＃34;高度（即他们不会包装他们的实际内容） - 搜索有关浮动的问题以获得示例。所以垂直地“松散”＃34; #A和#B处于相同的高度，这就是链接导致相同滚动位置的原因。奇怪的东西，但这一切都与浮动元素以及浮动元素如何影响其容器的高度有关。

Answer 2

问题是你为这两个部分设置了.cont1类，并使它们向左浮动，高度为1500px。试试这个css

 #A, #B {
  min-width: 100%;

}

.cont1 {
  height: 100vh;
  background-color: #2077a5;
  }

你可以使用id =＆＃34; about＆＃34;和id =＆＃34;投资组合＆＃34;对于链接，所以你不需要额外的div＃A，B

<div id="nav">
  <ul>
  <li><a href="#about">About</a></li>
  <li><a href="#portfolio">Portfolio</a></li>
 </ul>
</div>


 <div id="about" class="cont1">
  About page content goes here. 
 </div>    



 <div id="portfolio" class="cont1">
   Portfolio page content goes here. 
 </div>

.cont1 {
width: 100%;
height: 1500px;
background-color: #2077a5;
float: left;
 }

div定位，奇怪的行为

2 个答案: