HTML 重叠文本

Question

我正在用 HTML 编写类似于填字游戏的东西。有一个 9x9 的表格，在每个单元格中，我们需要两件事：

• 单元格左上角的数字（小文本，正好靠边距）
• 单元格中间的一个字母（大文本）

不使用背景图片可以吗？我们已经尝试在单元格中使用浮动 div，但这并没有按预期工作。

Answer 1

您可以在每个单元格内放置一个具有预定义宽度和高度的 div，使 div 位置：相对；然后将其他元素作为 position:absolute 放在 div...

类似这样的： http://jsfiddle.net/battal84/Nt5uB/ ?

Answer 2

看看 CSS 计数器 类似的东西

.counter-parent-element { 
  counter-reset: your-counter-variable; 
}
.counter-element { 
  position: relative; 
  padding: 1em; 
  font-size: 18px; 
  border: 1px solid 
}
.counter-element:before {
  counter-increment: your-counter-variable; 
  content: counter(your-counter-variable); 
  position: absolute; 
  top: 2px; 
  left:2px; 
  font-size: 8px;
}

<table class="counter-parent-element">
<tr>
<td class="counter-element">a</td>
<td class="counter-element">b</td>
<td class="counter-element">c</td>
<td class="counter-element">d</td>
<td class="counter-element">e</td>
<td class="counter-element">f</td>
<td class="counter-element">g</td>
<td class="counter-element">h</td>
<td class="counter-element">i</td>
</tr>

<tr>
<td class="counter-element">j</td>
<td class="counter-element">k</td>
<td class="counter-element">l</td>
<td class="counter-element">m</td>
<td class="counter-element">n</td>
<td class="counter-element">o</td>
<td class="counter-element">p</td>
<td class="counter-element">q</td>
<td class="counter-element">r</td>
</tr>

<tr>
<td class="counter-element">s</td>
<td class="counter-element">t</td>
<td class="counter-element">u</td>
<td class="counter-element">v</td>
<td class="counter-element">w</td>
<td class="counter-element">x</td>
<td class="counter-element">y</td>
<td class="counter-element">z</td>
<td class="counter-element">a</td>
</tr>

<tr>
<td class="counter-element">b</td>
<td class="counter-element">c</td>
<td class="counter-element">d</td>
<td class="counter-element">e</td>
<td class="counter-element">f</td>
<td class="counter-element">g</td>
<td class="counter-element">h</td>
<td class="counter-element">i</td>
<td class="counter-element">j</td>
</tr>

<tr>
<td class="counter-element">k</td>
<td class="counter-element">l</td>
<td class="counter-element">m</td>
<td class="counter-element">n</td>
<td class="counter-element">o</td>
<td class="counter-element">p</td>
<td class="counter-element">q</td>
<td class="counter-element">r</td>
<td class="counter-element">s</td>
</tr>

<tr>
<td class="counter-element">t</td>
<td class="counter-element">u</td>
<td class="counter-element">v</td>
<td class="counter-element">w</td>
<td class="counter-element">x</td>
<td class="counter-element">y</td>
<td class="counter-element">z</td>
<td class="counter-element">a</td>
<td class="counter-element">b</td>
</tr>

<tr>
<td class="counter-element">c</td>
<td class="counter-element">d</td>
<td class="counter-element">e</td>
<td class="counter-element">f</td>
<td class="counter-element">g</td>
<td class="counter-element">h</td>
<td class="counter-element">i</td>
<td class="counter-element">j</td>
<td class="counter-element">k</td>
</tr>

<tr>
<td class="counter-element">l</td>
<td class="counter-element">m</td>
<td class="counter-element">n</td>
<td class="counter-element">o</td>
<td class="counter-element">p</td>
<td class="counter-element">q</td>
<td class="counter-element">r</td>
<td class="counter-element">s</td>
<td class="counter-element">t</td>
</tr>

<tr>
<td class="counter-element">u</td>
<td class="counter-element">v</td>
<td class="counter-element">w</td>
<td class="counter-element">x</td>
<td class="counter-element">y</td>
<td class="counter-element">z</td>
<td class="counter-element">a</td>
<td class="counter-element">b</td>
<td class="counter-element">c</td>
</tr>
</table>

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

为什么不将浮动应用到文本本身并将其变成块元素？

例如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>