HTML & CSS简单横线
HTML & CSS简单横线
提问于 2016-08-02 21:42:21
我试图设计我自己的网站，我想做一个简单的纵横字谜来演示一些关于我的东西。就像，每一行都是一个不同的词，但还有“中间”一栏，列出了另一个词。下面是我想要做的事情的一幅图像：
这些词是我预定义的。
我想知道使用HTML和CSS最简单的方法。我曾经想过使用一个表格，但是要使每一行按照单词移动，每行必须是一个不同的表。
我不使用图片，然后把它放在网站上，因为我想要它，所以每次用户悬停每个单词时，它都会显示它的意思/描述在右边/左边。
不管怎么说，如果有帮助的话，我愿意使用靴带。
有什么想法吗？
回答 3
Stack Overflow用户
回答已采纳
发布于 2016-08-02 22:07:07
我们什么时候开始用表格来布局了？只需添加5个div和一个边距-左适用于他们和风格的nth-child。这样，你甚至可以添加动画，如果你愿意的话。
Stack Overflow用户
发布于 2016-08-02 21:56:26
我认为一张桌子实际上是你最好的选择，你只需要为每个空方块添加额外的<td>标签。通过将td {width: 40px}添加到css中，可以使每个正方形具有相同的宽度。
table {
text-align: center;
}
td {
width: 40px;
height: 40px;
}
.letterData {
border: 2px solid #000;
}<table>
<tr>
<td></td>
<td></td>
<td class="letterData">O</td>
<td class="letterData">N</td>
<td class="letterData">E</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td class="letterData">T</td>
<td class="letterData">W</td>
<td class="letterData">O</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="letterData">F</td>
<td class="letterData">O</td>
<td class="letterData">U</td>
<td class="letterData">R</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td class="letterData">T</td>
<td class="letterData">H</td>
<td class="letterData">R</td>
<td class="letterData">E</td>
<td class="letterData">E</td>
</tr>
<tr>
<td class="letterData">E</td>
<td class="letterData">I</td>
<td class="letterData">G</td>
<td class="letterData">H</td>
<td class="letterData">T</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Stack Overflow用户
发布于 2016-08-02 21:47:43
我认为最好的方法是首先定义一个代表正方形的容器：
.square {
position: absolute;
height: 32px;
width: 32px;
}然后，您可以这样定位其中的每一个：
<div id="square-0" class="square" style="top: 32px; left: 32px;">
A
<div>
<div id="square-1" class="square" style="top: 32px; left: 64px;">
B
</div>
<div id="square-2" class="square" style="top: 64px; left: 64px;">
C
</div>只要您使用的是各自高度和宽度的精确倍数的顶部和左边值来定位它们，那么它们都应该可以很好地结合在一起。
只是个主意，但我可能就是这么做的。给他们顺序的id，就像square-0和square-1，如果您决定在将来以编程方式扩展它，那么使用起来就更容易了。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38730965
复制相关文章
相似问题
腾讯云开发者
