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 - Bootstrap4 .col 始终采用 100% 并垂直堆叠( Bootstrap 网格不工作)

css - 如何在所有缩放级别保持字体大小相等?

jquery - 如何在点击表格数据时设置背景颜色?

javascript - CSS/HTML 画廊

在 IE 中居中的 css 问题

javascript - 如何向 Meteor 应用程序添加 "# users online"功能?

html - HTML建议:我应该选择调整图库图像的大小还是使用单独的缩略图图像?

javascript - 按类触发下一个元素的函数

jquery - Bootstrap 3 - 可折叠的右侧面板,如 Google Drive Details/Activity 面板

html - VB.net OnClientClick 传入另一个div的ID