我希望你过得愉快!我创建了一个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;
答案 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一直继承视口的高度,直到您的容器
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;
注意
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>