HTML制作一个三部分内容框

我试图在内容部分制作一个带有标题和两条垂直线的框，以使框具有三个部分。我仍然是HTML的初学者，已经完成了框的制作，但还不知道如何制作垂直线。这就是我想做的：

我只需要在框内画两条垂直线，并用内容填充三个部分中的每一个。如果有人能帮我或者给我指出正确的方向，我将不胜感激。很抱歉，这张糟糕的照片让我不得不从截图中删除一些内容。

请看下面的钢笔：

---

这是一个具有类似垂直线处理的导航菜单示例，但是CSS应该很容易应用于内容框设计。唯一需要注意的是确保它们应用于高度最大的框，或者确保内容框的高度都相同。

根据图片，我认为您要查找的是HTML表

例如：

<table border="1" width="100%">
  <tr>
    <th colspan="3">Headline</th>
  </tr>
  <tr>
    <td>Content...</td>
    <td>Content...</td>
    <td>Content...</td>
  </tr>
</table>

大字标题
内容。。。
内容。。。
内容。。。

您可以使用CSS设置框的样式

---

PD：下次展示一些代码时，这样我们可以更好地了解您要做的事情。

不要听别人告诉您使用表格。您可以使用

flexbox

执行此操作。下面是一个例子：

.header{
背景颜色：浅灰色；
}
.圆柱容器{
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
}
.栏目{
填充：10px；
左边框：1px纯黑；
}
.专栏：第一个孩子{
左边界：无；
}

这是标题文本。
Lorem ipsum dolor sit amet，是一位杰出的献身者。Vivamus ornare、sem sit amet ornare consequat、nunc turpis accumsan urna、ac hendrerit orci sapien eu purus。在温文尔雅的爱神面前，我们的爱是永恒的。整数hendrerit metus sed ligula lobortis，et scelerisque libero congue。修女会的设施很简单。Nam aliquet ullamcorper nisl，ac congue leo Pelletsque eget。前庭对侧，前庭前内侧，前庭舌舌。埃尼安和波尔塔精英。不，不，不，不。Morbi pellentesque erat ut leo tincidunt调味品。
Lorem ipsum dolor sit amet，是一位杰出的献身者。Vivamus ornare、sem sit amet ornare consequat、nunc turpis accumsan urna、ac hendrerit orci sapien eu purus。在温文尔雅的爱神面前，我们的爱是永恒的。整数hendrerit metus sed ligula lobortis，et scelerisque libero congue。修女会的设施很简单。Nam aliquet ullamcorper nisl，ac congue leo Pelletsque eget。前庭对侧，前庭前内侧，前庭舌舌。埃尼安和波尔塔精英。不，不，不，不。Morbi pellentesque erat ut leo tincidunt调味品。
Lorem ipsum dolor sit amet，是一位杰出的献身者。Vivamus ornare、sem sit amet ornare consequat、nunc turpis accumsan urna、ac hendrerit orci sapien eu purus。在温文尔雅的爱神面前，我们的爱是永恒的。整数hendrerit metus sed ligula lobortis，et scelerisque libero congue。修女会的设施很简单。Nam aliquet ullamcorper nisl，ac congue leo Pelletsque eget。前庭对侧，前庭前内侧，前庭舌舌。埃尼安和波尔塔精英。不，不，不，不。Morbi pellentesque erat ut leo tincidunt调味品。

这项工作：

#容器{
宽度：100%；
高度：100px；
边框：1px纯黑；
}
#标题{
宽度：100%；
背景：灰色；
高度：20px；
}
.第四{
宽度：25%；
高度：100px；
浮动：左；
}
.一半{
宽度：50%；
高度：100px；
左边框：1px纯色灰色；
右边框：1px纯色灰色；
浮动：左；
}

出于安全原因，我无法显示代码。我处理敏感的客户信息，所以我不能发布我的任何代码。我没有看到我已经做的和我正在做的有什么关系。我只是想找出垂直线。我不需要盒子的帮助，所以盒子的代码是不相关的。谢谢你的帮助，如果我想不出这个内容框，我会考虑一张桌子。太棒了，非常感谢。我想我可以从中找到答案。我建议使用HTML表格，因为附带的图像似乎代表某种表格数据。我同意您可以使用Flexbox获得相同的视觉效果。您也可以通过其他方式实现同样的效果，例如，更具体地说，使用CSS“display:table”。我相信你不应该在没有正当理由的情况下说“不要听别人说话…”之类的话。让我澄清一下，如果你的评论是基于十多年前开始的错误的“无桌设计哲学”，因为我们设计师出于必要而做了一些事情。。。桌子是有用途的。正如您在W3C规范中所读到的那样，“HTML表格模型允许作者将数据——文本、预格式化文本、图像、链接、表单、表单字段、其他表格等——排列到单元格的行和列中。”表格是用来表示表格内容的一种工具。据一些消息来源称，自3.2版以来，表格一直是HTML标准的一部分，在HTML5中有效，在HTML5.1中也将有效。所以，若你们有一些数据要显示，你们可以使用table。你不必用一堆div和CSS来重新创造它们。附言：如果我们提出的建议涉及使用可能会在特定浏览器/设备上出现不希望出现的行为的技术，而这些行为可能仍然与某人相关，那么这是一个警告潜在问题的良好做法。

<table border="1" width="100%">
  <tr>
    <th colspan="3">Headline</th>
  </tr>
  <tr>
    <td>Content...</td>
    <td>Content...</td>
    <td>Content...</td>
  </tr>
</table>