行高似乎不能在表格單元格內工作

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>