Исправлена ​​табличная раскладка на веб-странице - PullRequest
Новая
       15

Исправлена ​​табличная раскладка на веб-странице

1 голос
/ 11 марта 2012

Я хотел бы представить промежуточные этапы деления методом пера и бумаги на веб-странице.

Результат должен выглядеть как «написано» на миллиметровке / клетчатой ​​бумаге.

  • Я мог бы использовать стол, но WCAG говорит, что это не так.
  • Я мог бы использовать шрифт фиксированной ширины и <pre>, но что, если мне не нравятся шрифты фиксированной ширины?

Это изображение объясняет это лучше: http://upload.wikimedia.org/wikipedia/commons/4/40/Division_Schriftlich.jpg

Вертикальный язык важен.

1 Ответ

1 голос
/ 11 марта 2012

Вот пример использования divs.И размер текста будет работать с этим.Обратите внимание, что для добавления текста необходимо читать столбцы по вертикали.

HTML 

<div class="col">1<br>1<br></div>
<div class="col">3<br>2<br>1<br>1</div>
<div class="col">0<br>0<br>0<br>0</div>
<div class="col">7<br><br>7<br>5<br>2<br>1</div>
<div class="col"><br><br><br><br>0<br>5</div>
<div class="col"><br></div>

CSS 

.col {
    border: 1px solid black;
    display: inline-block;
    float: left;
}

Пример с границами (для отображения выравнивания по вертикали) здесь

Пример без границ здесь

Метод, использующий неразрывные пробелы, например: 

1307<br>
120<br>
&nbsp;107<br>
&nbsp;105<br>

не будет выравниватьдолжным образом.Поэтому, отбрасывая горизонтальное выравнивание, я думаю, что вертикальное выравнивание - лучший вариант.

Вот пример с улучшенной компоновкой

...