HTML重疊文本

Question

我寫的東西類似於HTML中的填字遊戲。有一個9x9的表，並在每個單元中，我們需要兩樣東西：

• 一個數字，單元格的左上角（小文，正對着保證金）
• 正中阿信的細胞（大文本）

這可能不使用背景圖片嗎？我們嘗試過單元格內的浮動div，但這並不像預期的那樣工作。

Answer 1

您可以在每個單元格中放置一個具有預定義寬度和高度的div，使div位置爲：relative;然後把你的其他元素作爲位置：絕對在div裏面...

這樣的事情： http://jsfiddle.net/battal84/Nt5uB/ ？

Answer 2

看一看CSS計數器

http://webdesign.about.com/od/css2/a/aa032807.htm

使用絕對定位在一個相對定位的容器。

Answer 3

請試試這個代碼：

<style type="text/css"> 
    table { 
     height:100px; 
     width:300px; 
    } 
    table td { 
     border:1px solid #000; 
     font-size:20px; 
     position:relative; 
     text-align:center; 
     vertical-align:middle; 
     width:33%; 
    } 
    table td > div { 
     font-size:10px; 
     position:absolute; 
     top:5px; 
     left:5px; 
    } 
    </style> 

<table> 
    <tr> 
     <td><div class="a">First</div>A</td> 
     <td><div class="b">Second</div>B</td> 
     <td><div class="c">Third</div>C</td> 
    </tr> 
</table> 

這3列樣品，但您可以根據需要複製到儘可能多的。

Answer 4

爲什麼不將float應用於文本本身並將其轉換爲塊元素？

如CSS

.smallnumber {font-size:0.5em; 
        margin:-0.25em .25em .25em .25em; 
        display:block; 
        float:right;} 

    .normaltext {font-size:1em; 
       margin:0.5em; 
       display:block; 
       float:left;} 

HTML

<table border="1"> 
    <tr> 
    <td><span class="normtext">1</span><span class="smallnum">2</span></td> 
    <td>11</td> 
    </tr> 
    <tr> 
    <td>11</td> 
    <td>11</td> 
    </tr>