另一个div里面的div框没有出现

时间:2017-11-04 14:41:10

标签: html css

我希望你过得愉快!我创建了一个div,我放了3个信息框。当我用百分比设置宽度和高度时,框不会出现。但如果我用像素设置它们,它们会出现。我希望它们处于百分比,因为我希望网站能够完全响应它访问的每个设备。有什么提示吗?

HTML&安培; CSS:



#info {
  height: 50%;
  background-color: red;
}

.infoBox {
  width: 20%;
  height: 35%;
  background-color: blue;
  float: left;
  margin: 0 1%;
}

<div id="info">

  <div class="infoBox" id="infoBox1">

  </div>

  <div class="infoBox" id="infoBox1">

  </div>

  <div class="infoBox" id="infoBox1">

  </div>

</div>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:1)

您的盒子的height计算为&{39; auto&#39;因为#info的父级没有明确指定height

https://www.w3.org/TR/CSS2/visudet.html#the-height-property

  

<强> <percentage>

     

指定百分比高度。百分比是根据生成的包含块的高度计算的。 如果未明确指定包含块的高度(即,它取决于内容高度),并且此元素未完全定位,则值计算为&#39; auto&#39;。根元素的百分比高度相对于初始包含块。注意:对于其包含块基于块级元素的绝对定位元素,百分比是根据该元素的填充框的高度计算的。这是CSS1的变化,其中百分比总是相对于父元素的内容框计算。

通常,您设法从html一直继承视口的高度,直到您的容器

&#13;
&#13;
html,
body {
  height: 100%;
}

#info {
  height: 50%;
  background-color: red;
}

.infoBox {
  width: 20%;
  height: 35%;
  background-color: blue;
  float: left;
  margin: 0 1%;
}
&#13;
<div id="info">

  <div class="infoBox" id="infoBox1">

  </div>

  <div class="infoBox" id="infoBox2">

  </div>

  <div class="infoBox" id="infoBox3">

  </div>

</div>
&#13;
&#13;
&#13;

注意

https://www.w3.org/TR/2011/WD-html5-20110525/elements.html#the-id-attribute

  

id属性指定其元素的唯一标识符(ID)。 该值必须在元素的主子树中的所有ID中唯一,且必须至少包含一个字符。该值不得包含任何空格字符。

答案 1 :(得分:0)

现在检查它是空白div,所以你必须以像素为单位给出高度或添加内容

.infoBox {
  width: 20%;
  min-height:200px;
  background-color: blue;
  float: left;
  margin: 0 1%;
  background-color:red;
}

#info {
  height: 50%;
  background-color: red;
}

.infoBox {
  width: 20%;
  min-height:200px;
  background-color: blue;
  float: left;
  margin: 0 1%;
  background-color:red;
}
<div id="info">

    <div class="infoBox" id="infoBox1">

    </div>

    <div class="infoBox" id="infoBox2">

    </div>

    <div class="infoBox" id="infoBox3">

    </div>

</div>