带文本的垂直框的HTML CSS

甚至可以用文本、HTML和CSS来做这样的事情吗？ 这张图片是我正在为网络和移动平台重建的旧Windows程序的屏幕截图

在这篇文章中，有几个人帮我做了一系列的水平方框：

这是目标。我正在创建一个WordPress短代码，它生成HTML。我想在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看起来真的很酷，但还没有为黄金时间做好准备。

---

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

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

见：

HTML:

编辑：

---

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

下面是您的示例：问题是第二个框沿着页面向下，而不是向右。我也不反对表：，但问题是相同的。我想我可以让它在一个页面上工作，但我正在努力用一个可以重复使用的短代码包装它。因此，每组三个框s必须独立于它周围的结构。我想我可以在WordPress页面中编写一个“包装表”，其中的每个单元格都可以包含一个简短的代码，指向我试图显示的特定字母/元音。此外，我还使用了一个响应式布局（骨架主题）这使得内容可以轻松地在移动设备上重新加载。您可以只向每个表元素添加float:left；margin left:5px；。我并没有遵循这一点；我在这里尝试了一下。通过向左浮动一个元素，您可以添加多个项目，并使它们彼此对齐，例如，对于3，您将有左、中、右和6 you将自动创建相同的2行。

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

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