Question

我试图将相邻的div's设置为不同的高度，就像垂直条形图一样。问题是，当我在px中指定div高度时，div's高度为ok但是当我以不同的百分比指定高度时，则所有相邻的div's缩小到相同的高度。我为容器div和条形div's指定了最小高度，但它仍然不起作用。这是我的代码：

HTML

<div class="barcontainer">
<div id="firstbar" class="bar" style= "height:10%">
&nbsp;
</div>
<div id="secondbar" class="bar" style= "height:80%">
&nbsp;
</div>
<div id="thirdbar" class="bar" style= "height:50%">
&nbsp;
</div>
<div id="fourthbar" class="bar" style= "height:30%">
&nbsp;
</div>
</div>

CSS

barscontainer
{
  min-height: 300px;
}
.bar{
  background: none repeat scroll 0 0 #7EADCB;
  border-bottom: medium none;
  float: left;
  display: inline-block;
  margin: 1px;
  vertical-align: top;
  width: 16px;
  min-height: 1px
  z-index: 1;
}

请指导我做错了什么。感谢。

Answer 1

我能看到的一些事情：

类选择器不正确：应为.barcontainer。
如果min-height类的barcontainer属性设置为height且长度值（如300px或30em），则条形长度正确。我怀疑问题是空洞的内容。
不间断的空格需要用某种东西包裹起来（p标签会这样做。）
您可以使用内联样式，但我可以使用ID选择器在CSS中应用它。

此处显示link显示这些更改。我注意到，当在MacBook Pro Retina上运行时，由于像素密度，300px并不是特别高。

另一种方法可能是使用SVG，具体取决于您的需求。我已经在这样的一些事情中使用了它们。有一些如何制作条形图的例子here。

Answer 2

div缩小，因为barcontainer高度将是几个像素，除非你clear浮动并设置barcontainer的高度 - 百分比现在可以使用正如所料。干杯！

.barcontainer{
   height: 300px;
  }
.barcontainer:after {
  content:'';
  display: block;
  clear: both;
}
.bar {
  background: none repeat scroll 0 0 #7EADCB;
  border-bottom: medium none;
  float: left;
  display: inline-block;
  margin: 1px;
  vertical-align: top;
  width: 16px;
  min-height: 1px;
  z-index: 1;
}

<div class="barcontainer">
  <div id="firstbar" class="bar" style="height:10%">
    &nbsp;
  </div>
  <div id="secondbar" class="bar" style="height:80%">
    &nbsp;
  </div>
  <div id="thirdbar" class="bar" style="height:50%">
    &nbsp;
  </div>
  <div id="fourthbar" class="bar" style="height:30%">
    &nbsp;
  </div>
</div>

<强>更新：

@Martin的评论让我思考。在SO本身的另一个thread（感谢@JohanKarlsson），我看到为什么你指定min-height并且当你给出百分比高度时孩子们不尊重它们：

高度 CSS property说：

百分比

百分比是根据高度来计算的   生成的框包含块。 如果含有的高度   未明确指定块（即，它取决于内容   高度），这个元素并不是绝对定位的值   计算到自动。根元素的百分比高度是相对的   到最初的包含块。

所以看起来（虽然我仍然有些疑惑）这里父级的 height 属性未指定，因此值计算为自动 - min-height覆盖height，但height仍未明确指定

。

为什么高度百分比会将相邻的div缩小到相同的高度？

2 个答案: