带有文本的垂直框的 HTML CSS

Question

有没有可能只用文本、HTML 和 CSS 做这样的事情？该图像是我正在为 Web 和移动平台重建的旧 Windows 程序的屏幕截图。

在这篇文章中，几个人帮我做了一系列的水平框: CSS alignment of div tags that form boxes around letters

这是目标。我正在创建一个生成 HTML 的 WordPress 简码。我想在 WordPress 中做这样的事情:

[showvowel vowel=KAMATZ letter=ALEF] 
[showvowel vowel=PATACH letter=ALEF] 
[showvowel vowel=SEGOL letter=ALEF] 

然后我可能会用完全不同的字母做同样的事情(有些页面可能只有一两个，其他可能有三到五个。

[showvowel vowel=KAMATZ letter=GIMMEL] 
[showvowel vowel=PATACH letter=GIMMEL] 

我已经获得了在 JSON 结构中构建文本的信息。

我的想法是创建一个可重复使用的子例程，该子例程将动态构建 HTML 以创建我想在任何给定时间显示的任何字母和元音。因此，一旦我弄清楚演示文稿在浏览器中的工作方式，那么我就可以将其放入 WordPress 短代码中。

如果您对示例有想法，无需显示希伯来字母，我已经掌握了。

HTML5 flexbox 看起来很酷，但还没有准备好迎接黄金时段。 http://www.html5rocks.com/en/tutorials/flexbox/quick/

如果必须的话，我想我可以将它翻转到一边并使其水平。

Answer 1

如果您不想使用表格，那么我会使用带有 css 的 div 框。它很简单，适用于大多数网络浏览器。

参见:http://linuxandfriends.com/2009/04/04/how-to-style-div-elements-as-tables/

HTML:

<div class="div-table">
<div class="div-table-caption">Top Portion</div>
<div class="div-table-row">
<div class="div-table-col">Next Down</div>
</div>
<div class="div-table-row">
<div class="div-table-col">Next Down</div>
</div>
</div>

CSS:

.div-table{display:table; border:1px solid #003399;}

.div-table-caption{display:table-caption; background:#009999;}

.div-table-row{display:table-row;}

.div-table-col{display:table-cell; padding: 5px; border: 1px solid #003399;}

编辑:

注意:要拥有三列，您需要使用包装器。