这个 <div> 占什么部分的 % 宽度答案

【问题标题】：% width of what part does this <div> take这个 <div> 占什么部分的 % 宽度
【发布时间】：2017-03-12 21:02:39
【问题描述】：

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

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

        <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%，我认为这是正确的。

这是图示：

【问题讨论】：

标签： css html width percentage

【解决方案1】：

问题在于position 值：

如果父母和孩子没有定位，孩子的50％宽度意味着父母的50％宽度

如果子元素是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>

【讨论】：

是的，它修复了它。原来我必须看到更多关于定位的教程。是否需要将父div定位到绝对顺序，以便其子级根据父级获得宽度？
是的，父母只需要定位。

【解决方案2】：

it(any element) 采用其父元素的百分比宽度。

【讨论】：

【解决方案3】：

注意nav2是一个块元素，它会取出其父元素（在本例中为body）的整个宽度

看到这个sn-p

#nav2{
    border:solid red;

    }
    #dropcontents{
      border:solid;
      width:50%;
    }

<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>

如果您将 nav 的宽度设置为其父宽度的 50%，您会注意到 dropContents div 将调整为 nav2 的 50%

见下面的sn-p

#nav2 {
  border: solid red;
  width: 50%
}
#dropcontents {
  border: solid;
  width: 50%;
}

<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>

【讨论】：