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

为什么不将浮点数应用于文本本身并将其转换为块元素？

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

HTML重叠文本

4 个答案: