在div中包装文本

Question

我想设计一个如下的div -

此div的代码如下

    <div style='width:132.5px; height:158px;background-color:#cccccc;display:block;float:left;margin:3px'>
  <div style='background-color:#cccccc;width:100%;height:50%;float:top;color: black;'>
    <span style = 'font-style:bold;font-size:18.5px;line-height: -moz-block-height;width:100%;height:100%;'>Gross Margin Amount
    </span>
  </div>
<div style='background-color:#dddddd;font-style:bold;font-size:"+fontSize2+"px;line-height: -moz-block-height;text-align:center;width:100%;height:50%;color: white;float:bottom'>3,110
</div>

正如你可以看到第一个div的文字侵入了下层div。 我想将文本包装在div中。是否可能？ 提前谢谢。

Answer 1

在您的示例中，<div标记不平衡。也许这已经是你的问题。

除此之外，您应该使用单独的CSS样式来保持可读性。这可能就是你要找的东西：

http://jsfiddle.net/bsdhze4a/4/

HTML：

<div class="outer">
  <div class="inner top">Gross Margin Amount</div>
  <div class="inner bottom">3,110</div>
</div>

CSS：

div.outer {
    width: 200px; 
    height: 200px;
    display: block;
    margin: 3px;
    text-align: center;
}
div.inner {
    width:100%;
    height:50%;
    display: inline-block;
    line-height: 100px;
}
div.inner.top {
    color: black;
    background-color: #759BA6;
}
div.inner.bottom {
    color: white;
    background-color: #084C61;
    font-style: bold;
    font-size: 10px;
}

结果：