Question

我有一个div风格

.metal_rods{        
    max-width:200px;
    background:red; 
    margin:1px;
    display:block;
}

以下是divs

<div class='metal_rods' height='10px'> 50 </div> 
<div class='metal_rods' height='110px'> 50 </div> 
<div class='metal_rods' height='90px'> 50 </div> 
<div class='metal_rods' height='0'> 50 </div>

即使div有不同的高度，出于某种原因也会出现相同的情况。即使显示更改为inline-block

这是一个演示： http://jsfiddle.net/KfDm9/

我知道我错过了一些简单的事情，但我无法弄清楚

Answer 1

不要height='value'这是一个对DIV没有意义的属性。

改为style='height:value'

Answer 2

不要使用height属性，这就像迪斯科舞厅一样。

基于评论的更新 height与迪斯科一样是DEAD。它无效，不能使用。永远。如果您以前使用过，请构建一个时间机器并撤消它。

仅使用CSS：

<div class='metal_rods' style="height:10px;"> 50 </div> 
<div class='metal_rods' style="height:110px"> 50 </div> 
<div class='metal_rods' style="height:90px'> 50 </div> 
<div class='metal_rods' style="height:0"'> 50 </div>

http://jsfiddle.net/KfDm9/2/

另外，将这些样式属性移动到单独的CSS文件中，将它们内联在元素上是不好的形式。您是否真的想强制所有设备以相同的方式设置元素的样式？针对不同介质的单独CSS样式表意味着您可以根据介质和分辨率对元素进行不同的样式设置！您可以为浏览器，打印机，平板电脑，智能手机以及尚未发明的东西提供不同的样式。

块divs高度被忽略

2 个答案: