Question

我正在尝试编写一个NCAA括号提交应用，但我无法弄清楚如何将{@ 3}}等括号形状的HTML元素排列。我想使用Bootstrap来保持UI看起来干净，但我并不依赖它。有什么建议吗？

Answer 1

使用div找到了很棒的示例HTML / CSS括号here。或者，使用无序列表can be found here的双面HTML / CSS括号的一个很好的例子。查看源代码并找出最适合您的方法。

我认为更好的方法是为每个单元格使用带有特定CSS table的HTML border。我在下面创建了一个粗略的例子。但是你可能想要自己玩它，查看链接，看看什么最适合你的应用程序。祝你好运！

HTML：

<table>
    <tr>
        <td><p>1. Team Name</p></td>
        <td rowspan="2"><p>Team Name</p></td>
        <td rowspan="4"><p>Team Name</p></td>
    </tr>
    <tr>
        <td style="border-right:1px solid black"><p>4. Team Name</p></td>
    </tr>
    <tr>
        <td ><p>2. Team Name</p></td>
        <td rowspan="2"><p>Team Name</p></td>
    </tr>
    <tr>
        <td style="border-right:1px solid black"><p>3. Team Name</p></td>
    </tr>
</table>

CSS：

table {
  border-collapse: collapse;
  border: none;
}

td {
  vertical-align: middle;
  width: 10em;
  margin: 0;
  padding: 0;
}

td p {
  border-bottom: solid 1px black;
  margin: 0;
  padding: 5px 5px 2px 5px;
}

JS Fiddle Example

如何安排像NCAA括号这样的HTML元素

1 个答案: