Question

这是我的HTML代码，用于在小容器中显示带背景的字体。。

这是css

.cons_save h4{font:bold 22px/60px Arial,Helvetica, sans-serif;margin:20px 0px -15px 20px; color:#f78d1d;vertical-align: bottom; background:url(../images/save_bg_cons.png) no-repeat; width:151px; height:69px;}

我无法忍受！在容器的底部，无论容器中的其他内容是什么，

我的HTML代码

<div id ="<?php echo $store->branch_id;?>Collect" style="display:block">    
 <span class="cons_save fl clr">
  <h4><?php echo $save. " %"; ?> </h4>
 </span>
</div>

Answer 1

首先，我将分别编写CSS的每个属性，如下所示：

.cons_save h4 {
    font-weight: bold;
    font-size: 22px/60px;
    font-family: Arial, Helvetica, sans-serif;
    margin: 20px 0px -15px 20px;
    color: #f78d1d;
    vertical-align: bottom;
    background: url(../images/save_bg_cons.png) no-repeat;
    width: 151px;
    height: 69px;
    }

然后，似乎类名与span标记中的名称不匹配。

您实际上应该尝试在标头标签中设置类名。

Answer 2

请勿在{{1}}

中添加heading代码

spans

并且还有大量的保证金和默认情况下填充。因此可能是进入谷底的原因。一定要清除它

<div id ="<?php echo $store->branch_id;?>Collect" style="display:block">    
     <div class="cons_save fl clr">
        <h4><?php echo $save. " %"; ?> </h4>
     </div>
</div>

没有重置也可以，请检查here

Answer 3

不确定是什么问题，如果你可以使用http://jsfiddle.net/进行分类，那就太好了。

无论如何，我建议您将span更改为div，如下所示：

<div id ="<?php echo $store->branch_id;?>Collect" style="display:block">    
 <div class="cons_save fl clr">
  <h4><?php echo $save. " %"; ?> </h4>
 </div>
</div>

此外，除非您添加到css vertical-align [注意：这在IE7中不起作用]，否则display: table-cell无法使用.cons_save h4{display: table-cell;font:bold 22px/60px Arial,Helvetica, sans-serif;margin:20px 0px -15px 20px; color:#f78d1d;vertical-align: bottom; background:url(../images/save_bg_cons.png) no-repeat; width:151px; height:69px;}：

{{1}}

Answer 4

我不建议您在块级元素上使用该属性（vertical-align）。并且不要在heading内放置span。如果不改变HTML，我会这样做：

#Collect{
  border: 1px solid #ccc; 
  width: 151px;
  height: 69px;
 }

h4{
  font-weight: bold;
  font-size: 22px/60px;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  color: #f78d1d;
  background: url(../images/save_bg_cons.png) no-repeat;
  background:#eee;
  position: absolute;
  bottom: 0;
}

你甚至可以摆脱span。

容器底部没有显示字体？

4 个答案: