html - 固定网页上的表格布局

Question

我想在网页上展示纸笔分割法的中间步骤。

结果应该像“写”在方格纸/方格纸上。

• 我可以使用表格，但 WCAG 说不是这样。
• 我可以使用固定宽度的字体和<pre> ，但如果我不喜欢固定宽度的字体怎么办？

这张图片更好地解释了它: http://upload.wikimedia.org/wikipedia/commons/4/40/Division_Schriftlich.jpg

垂直排列很重要。

Answer 1

这是一个使用 div 的例子。文本类型的大小将适用于此。请注意，您必须垂直阅读各列才能添加文本。

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;
}

带边框的示例(显示垂直对齐)here

无边框示例 here

使用不间断空格的方法，例如:

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

不会正确对齐。因此放弃水平对齐，我认为垂直对齐是最好的选择。

这是一个 example具有增强的布局