HTML перекрывающийся текст

Question

Я пишу что-то похожее на кроссворд в HTML.Есть таблица 9x9, и в каждой ячейке нам нужны две вещи:

• Число в верхнем левом углу ячейки (мелкий текст, справа от поля)
• Буква в центре ячейки (большой текст)

Возможно ли это без использования фоновых изображений?Мы пробовали использовать плавающие div внутри ячеек, но это не работает так, как ожидалось.

Answer 1

Вы можете поместить div с предопределенной шириной и высотой внутри каждой ячейки, сделать положение div: относительным; а затем поместите остальные элементы в положение: абсолютный внутри 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

Почему бы вам не применить 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>

Answer 4

Пожалуйста, попробуйте этот код:

<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 столбцами, но вы можете скопировать столько, сколько вам нужно.