行高似乎在表格单元格内不起作用

http://jsfiddle.net/vmedg/

有多种方法可以实现该图片的外观。我将为您提供一个入门示例。

我更喜欢使用，position: absolute因为N在1容器中安排盒子要容易得多。有时，不使用它可能几乎是不可能的。position: absolute将元素固定div为父元素.container。

因此，通过将和设置.letter为top: 0和left: 0，可以将其定位在左上方。但是您希望这封信像您的图片一样扩展整个容器。因此，要做到这一点，我们可以简单地添加bottom: 0强制使其完全扩展。

HTML：

<div class="container">
    <div class="letter">A</div>
    <div class="number one">1</div>
    <div class="number two">2</div>
    <div class="number three">3</div>
</div>

CSS：

.container {
    position: relative;
    width: 300px;
    height: 300px;
    background: silver;  //remove this to make it white like in your pic
}
.letter {
    position: absolute;
    left: 0;        
    top: 0;
    width: 80%;
    bottom: 0;
    display: inline-block;
    border: 1px solid black;
    font-size: 248px;
    text-indent: 30px;
}
.number {
    position: absolute;
    right: 0;
    width: 19%;
    height: 33%;
    border: 1px solid black;
    font-size: 60px;
    text-indent: 15px;
}
.one {
    top: 0;
}
.two {
    top: 33%;
}
.three {
    top: 66%;
}