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

Question

我无法获得表格来格式化图像中的字体。我所做的是将数字的行高设置为33％，但到目前为止，行高一直是整行高度，我无法使用表标记或div / span标记获得以下布局。非常感谢任何帮助。

Answer 1

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%;
}

Answer 2

您可以相应地更改字体大小和边框，但以下布局应该可以使用

<div style="display:inline-block;font-size:400%">A</div>
<div style="display:inline-block">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>