Question

这是另一个css古怪..

在使用px，vw，em等时，内联块容器将正确计算宽度。但在使用％measure时则不行。

百分比： 像素（正确）：

HTML

＆＃13;

    .clip{
      width: 100%; overflow:hidden;
      position:relative;
    }
    .show-width-con{
      min-width: 100%; 
      display:inline-block;
      white-space:nowrap;
    }
    .element-perc{
      width:24%;
      display:inline-block;
      vertical-align: top;
      position: relative;
    }
    
    .element-px{
      
      width:300px;
      display:inline-block;
      vertical-align: top;
      position: relative;
    }

＆＃13;

  <div class="clip">
      <div class="show-width-con">
        <div class="element-perc">25%</div>
        <div class="element-perc">25%</div>
        <div class="element-perc">25%</div>
        <div class="element-perc">25%</div>
        <div class="element-perc">25%</div>
        <div class="element-perc">25%</div>
      </div>
    </div>
    
    <br><br>
    
    <div class="clip">
      <div class="show-width-con">
        <div class="element-px">300px</div>
        <div class="element-px">300px</div>
        <div class="element-px">300px</div>
        <div class="element-px">300px</div>
        <div class="element-px">300px</div>
        <div class="element-px">300px</div>
      </div>
    </div>

＆＃13;

笔是https://codepen.io/digitalzoomstudio/pen/BYWEoG

Answer 1

.clip{
  width: 100%;
  max-width: 100%;
  position:relative;
}

.show-width-con {
  font-size: 0;
  min-width: 100%; 
  max-width: 100%;
  display:inline-block;
}

.element-perc {
  font-size: 16px;
  width:25%;
  display:inline-block;
  vertical-align: top;
  position: relative;
}

.element-px{
  font-size: 16px;
  width:300px;
  display:inline-block;
  vertical-align: top;
  position: relative;
}

<div class="clip">
  <div class="show-width-con">
    <div class="element-perc">25%</div>
    <div class="element-perc">25%</div>
    <div class="element-perc">25%</div>
    <div class="element-perc">25%</div>
    <div class="element-perc">25%</div>
    <div class="element-perc">25%</div>
  </div>
</div>

<br><br>

<div class="clip">
  <div class="show-width-con">
    <div class="element-px">300px</div>
    <div class="element-px">300px</div>
    <div class="element-px">300px</div>
    <div class="element-px">300px</div>
    <div class="element-px">300px</div>
    <div class="element-px">300px</div>
  </div>
</div>

内联块元素包含伪空格，其中一个怪癖仍然存在。

可以使用元素之间的html注释来解决。

或者通过将父容器的字体大小设置为0;并在子元素中重新设置字体大小。

为了创建布局，我建议使用浮动网格（如果您需要担心浏览器支持），flexbox或css网格。

更多flexbox或css网格，因为您似乎想要垂直对齐事物。

希望这会有所帮助。

资源：

css-tricks

treehouse-post

Answer 2

25％是容器的25％，即100％的窗口。所以，如果你的窗口是1200px，那么25％将是300px; 300px * 6（你拥有的div数）= 1800px。所以，你想知道为什么第一个父容器测量1200而第二个容器测量1800。

100％宽度是指容器，而不是内容。如果你从.show-width-con取出最小宽度，你会看到你的25％容器也没有宽度（因为25％的东西都没有）。由于您的最小宽度为100％，因此第一个容器的宽度为1200px（即100％），因此您的25％容器现在宽300px。并且溢出被修剪，但它不会改变保持容器的宽度。

然而，由于它是最小宽度而不是总宽度，因此容纳300px的容器将增长到其最大尺寸1800（300 * 6）。但是，如果将min-width更改为width，您将看到此容器还测量1200px，这是窗口的100％。

或者，或许这样思考是有帮助的：如果父容器测量1800px，如果它确实300px不是25％，450px将是没有意义的。但是然后450px * 6 = 2700，但2700的25％是675和675 * 6 = 4050，并且一直打开。但是，无论窗口大小是多少，300px都是300px。

当孩子分配了百分比时，css无法正确计算宽度

2 个答案: