时间戳

首页 > 解决方案 > 为什么宽度为百分比的浮点数在具有兄弟姐妹的容器中的行为与宽度为像素的容器内的行为不同？

html - 为什么宽度为百分比的浮点数在具有兄弟姐妹的容器中的行为与宽度为像素的容器内的行为不同？

问题描述

.container {
    display:inline-block;
    position:relative;
    box-shadow: 0 0 20px 2px yellow;
}

img {
    vertical-align: bottom;  
}


.overlay {
    background-color: skyblue;
    width:;
    float:left;
}
<div class="container"> 

<img src="https://athome.reachtheworld.org/wp-content/uploads/2020/09/NYC.jpg">

<div class="overlay">
  Text
</div>

</div>

在此示例中，浮动的宽度是其内容、文本的大小，并且容器已扩展至刚好足以容纳两个兄弟姐妹。

现在，如果我以像素为单位增加浮动的宽度，浮动将开始推动兄弟姐妹，这将扩大容器。

.container {
    display:inline-block;
    position:relative;
    box-shadow: 0 0 20px 2px yellow;
}

img {
    vertical-align: bottom;  
}


.overlay {
    background-color: skyblue;
    width:100px;
    float:left;
}
<div class="container"> 

<img src="https://athome.reachtheworld.org/wp-content/uploads/2020/09/NYC.jpg">

<div class="overlay">
  Text
</div>

</div>

您可能必须在片段上使用全屏才能看到它。

现在，如果我在浮动的宽度上使用百分比而不是像素，则容器只会扩展以包含浮动的文本，而额外的宽度不会推动同级。相反，浮动被向下推到新的一行，容器上的额外宽度仍有待在右侧看到。为什么会这样？

或者更具体地说，浮动的宽度确实会推动兄弟，但直到没有更多空间，然后浮动被向下推动，并在新行上不断扩展，而容器保持原始浮动的宽度空间尺寸。

.container {
    display:inline-block;
    position:relative;
    box-shadow: 0 0 20px 2px yellow;
}

img {
    vertical-align: bottom;  
}


.overlay {
    background-color: skyblue;
    width:10%;
    float:left;
}
<div class="container"> 

<img src="https://athome.reachtheworld.org/wp-content/uploads/2020/09/NYC.jpg">

<div class="overlay">
  Text
</div>

</div>

这是一个截图来说明我的问题。

截屏

我有点理解浮动是基于百分比的，所以容器必须保持这个比例，但是即使两个兄弟姐妹都是基于百分比，然后你增加其中一个的百分比，容器仍然保持当的宽度两个兄弟姐妹都有完美的 100% 宽度。

这就是我的意思：

.container {
    display:inline-block;
    position:relative;
    box-shadow: 0 0 20px 2px yellow;
}

img {
    vertical-align: bottom;  
    width:90%;

}


.overlay {
    background-color: skyblue;
    width:10%;
    float:left;
}
<div class="container"> 

<img src="https://athome.reachtheworld.org/wp-content/uploads/2020/09/NYC.jpg">

<div class="overlay">
  Text
</div>

</div>

现在，您会看到两个兄弟姐妹如何精确地占用 100%，但是现在如果您将浮动的宽度设置为 20%，它将被向下推，因为没有更多空间，但容器将保持与之前相同的宽度基于浮动仅为 10%。这就是我的意思。为什么它保持这个宽度？

标签： htmlcss

解决方案

百分比需要参考，因此为了找到子元素的百分比宽度，我们首先需要知道也基于其内容的父元素之一。我们有一个循环。

在这种情况下，我们首先考虑子元素的宽度是自动的，以便识别父元素的宽度，然后我们使用该宽度来计算子元素之一，并且父元素的大小将不再变化（否则我们将有一个无限循环）。

这是一个插图，以便更好地理解

.container {
  display: inline-block;
  position: relative;
  border: 10px solid yellow;
  margin:5px;
}

img {
  vertical-align: bottom;
}

.overlay {
  background-color: skyblue;
  float: left;
}
<p>Initial state</p>
<div class="container">
  <img src="https://picsum.photos/id/17/200/200">

  <div class="overlay">
    Text
  </div>
</div>
<p>let use some percentage</p>
<div class="container">
  <img src="https://picsum.photos/id/17/200/200" style="width:20%">

  <div class="overlay" style="width:80%">
    Text
  </div>
</div>
<br>
<div class="container">
  <img src="https://picsum.photos/id/17/200/200" style="width:80%">

  <div class="overlay" style="width:80%">
    Text
  </div>
</div>
<br>
<div class="container">
  <img src="https://picsum.photos/id/17/200/200" style="width:40%">

  <div class="overlay">
    Text
  </div>
</div>
<br>
<div class="container">
  <img src="https://picsum.photos/id/17/200/200" style="width:100%">

  <div class="overlay" style="width:100%">
    Text
  </div>
</div>
<br>
<div class="container">
  <img src="https://picsum.photos/id/17/200/200" style="width:200%">

  <div class="overlay" style="width:150%">
    Text
  </div>
</div>

您可以清楚地注意到，在所有情况下，父级的宽度保持不变，子级将使用该宽度作为计算的参考。该宽度最初是根据文本和图像的默认宽度计算得出的。

使用像素值是另一回事，因为我们没有任何复杂的计算，并且父级将根据子级调整其宽度：

.container {
  display: inline-block;
  position: relative;
  border: 10px solid yellow;
  margin:5px;
}

img {
  vertical-align: bottom;
}

.overlay {
  background-color: skyblue;
  float: left;
}
<p>Initial state</p>
<div class="container">
  <img src="https://picsum.photos/id/17/200/200">

  <div class="overlay">
    Text
  </div>
</div>
<p>let use some percentage</p>
<div class="container">
  <img src="https://picsum.photos/id/17/200/200" style="width:20px">

  <div class="overlay" style="width:80px">
    Text
  </div>
</div>
<br>
<div class="container">
  <img src="https://picsum.photos/id/17/200/200" style="width:80px">

  <div class="overlay" style="width:80px">
    Text
  </div>
</div>
<br>
<div class="container">
  <img src="https://picsum.photos/id/17/200/200" style="width:40px">

  <div class="overlay">
    Text
  </div>
</div>
<br>
<div class="container">
  <img src="https://picsum.photos/id/17/200/200" style="width:100px">

  <div class="overlay" style="width:100px">
    Text
  </div>
</div>
<br>
<div class="container">
  <img src="https://picsum.photos/id/17/200/200" style="width:200px">

  <div class="overlay" style="width:150px">
    Text
  </div>
</div>

更准确的细节可以参考规范：https ://www.w3.org/TR/css-sizing-3/#intrinsic-contribution

推荐阅读