html - block div 高度被忽略

标签 html css

我有一个div样式

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

这里是div

<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/

我知道我错过了一些简单的东西,但我想不出来

最佳答案

不要使用 height 属性,那就像迪斯科一样。

根据评论更新 height 像迪斯科一样死了。无效,请勿使用。曾经。如果您过去使用过,请构建一个时间机器,然后撤消它。

仅使用 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 样式表意味着您可以根据媒体和分辨率设置不同的元素样式!您可以为浏览器、打印机、平板电脑、智能手机和尚未发明的事物设置不同的样式。

关于html - block div 高度被忽略,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20182004/

相关文章:

javascript - iframe 禁用选项卡上的滚动

php - 编辑/更新搜索查询中的结果之一

html - 背景缩放与 css 过渡不起作用

javascript - 在 Bootstrap 中使用 Datepicker 会出现错误 : Object doesn't support property or method 'datepicker'

php - 为什么html页面读不到php页面

javascript - 在 AngularJs 中调用函数 onclick

html - 表格单元格中的 CSS 文本颜色

javascript - 更改旋转动画位置

html - 如何覆盖 Firefox 只读输入默认光标?

css - 在 compass config.rb 中指定单个 scss 文件