css - % 这个 占据的部分的宽度

Question

所以可能有更简单的方法来解释这个问题，但这是我所知道的:

这基本上是一个下拉菜单内的简单下拉菜单。我知道这个下拉菜单是如何工作的，但这里真正的问题是宽度。

        <div id="nav2">
            Categories
            <div id="dropcontents">
                <div id="sub-nav">
                    Mobile
                    <div id="sub-dropcontents">
                        <a href="#">Hardware</a>
                        <a href="#">Software</a>
                    </div>
                </div>
                <a href="#">Windows</a>
                <a href="#">News</a>
                <a href="#">Articles</a>
            </div>
        </div>

现在的问题是，如果我将 50% 的宽度分配给“dropcontents”，那么它就相当于整个网站宽度的一半。所以它不应该占用 50% 的“nav2”，因为它在那个 div 中吗？我不想在这里使用像素。我注意到“sub-dropcontents”占“dropcontents”宽度的 50%，我认为这是正确的。

这是图示:

Answer 1

问题是 position 值:

如果parent和children没有定位，那么children的50%宽度就是parent的50%宽度

如果 child 是 position:absolute; 宽度的 50% 意味着定位的第一个父级的 50%；如果没有任何父级，它将引用整个文档的百分比。

要解决这个问题，只需将 position:something; 放在百分比必须引用的 div 中即可。

要获得更好的解释，请参阅此 DEMO .

.parent {
  width: 500px;
  height: 200px;
  background-color: red;
  margin-bottom:10px;
}

.child {
  width: 50%;
  height: 200px;
  background-color: blue;
}

.absolute {
  position:absolute;
}
.relative {
  position:relative;
}

Parent-> not positioned and Child -> not positioned
<div class="parent">
  <div class="child">
  </div>
</div>
Parent-> not positioned and Child -> absolute
<div class="parent">
  <div class="child absolute">
  </div>
</div>
Parent-> relative and Child -> absolute
<div class="parent relative">
  <div class="child absolute">
  </div>
</div>
Parent-> absolute and Child -> absolute
<div class="parent absolute">
  <div class="child absolute">
  </div>
</div>