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

Question

我一直无法获取表格来格式化图像中的字体。我所做的就是将数字的行高设置为33％，但到目前为止行高一直是全行高度，我无法使用表格标签或div/span标签获取以下布局。任何帮助是极大的赞赏。

Answer 1

http://jsfiddle.net/vmedg/

有不同的方式来实现这一PIC的外观。我会为您提供一个开始的例子。

我更喜欢使用position: absolute，因为它更容易在1容器中安排N箱子。有时候，如果不使用它，这可能是不可能的。 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>