HTML 制作一个三部分内容框

Question

我正在尝试制作一个带有 header 和内容部分中两条垂直线的框，以制作包含三个部分的框。我仍然是 HTML 的初学者，已经完成了盒子的制作，但不知道如何制作垂直线。这就是我想要做的：

我只需要在框内制作两条垂直线，并用内容填充三个部分中的每一个。如果有人可以帮助我或指出正确的方向，我将不胜感激。抱歉，我不得不从屏幕截图中删除一些东西。

Answer 1

.line-navbar li { 
  display: inline-block; 
  border-right: 1px solid #ccc;
  margin: 5px 0;
}

.line-navbar li:last-of-type { 
  border-right: none; 
}

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

Answer 2

根据图片我想你要找的是HTML Table.

示例：

<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: 下次展示一些代码，这样我们可以更好地理解你想要做什么。

Answer 3

不要听信别人告诉你使用 table。您可以使用 flexbox 执行此操作。这是一个例子：

.header {
  background-color: LightGrey;
}

.column-container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

.column {
  padding: 10px;
  border-left: 1px solid black;
}

.column:first-child {
  border-left: none;
}

<div class="header">
  This is header text.
</div>
<div class="column-container">
  <div class="column">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ornare, sem sit amet ornare consequat, nunc turpis accumsan urna, ac hendrerit orci sapien eu purus. Proin blandit finibus eros, ut egestas urna aliquam eget. Integer hendrerit metus sed ligula lobortis, et scelerisque libero congue. Nunc facilisis tincidunt dictum. Nam aliquet ullamcorper nisl, ac congue leo pellentesque eget. Vestibulum dui massa, pretium at ex id, aliquet mattis ligula. Aenean ut porta elit. Donec pulvinar a augue non bibendum. Morbi pellentesque erat ut leo tincidunt condimentum.
  </div>
  <div class="column">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ornare, sem sit amet ornare consequat, nunc turpis accumsan urna, ac hendrerit orci sapien eu purus. Proin blandit finibus eros, ut egestas urna aliquam eget. Integer hendrerit metus sed ligula lobortis, et scelerisque libero congue. Nunc facilisis tincidunt dictum. Nam aliquet ullamcorper nisl, ac congue leo pellentesque eget. Vestibulum dui massa, pretium at ex id, aliquet mattis ligula. Aenean ut porta elit. Donec pulvinar a augue non bibendum. Morbi pellentesque erat ut leo tincidunt condimentum.
  </div>
  <div class="column">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ornare, sem sit amet ornare consequat, nunc turpis accumsan urna, ac hendrerit orci sapien eu purus. Proin blandit finibus eros, ut egestas urna aliquam eget. Integer hendrerit metus sed ligula lobortis, et scelerisque libero congue. Nunc facilisis tincidunt dictum. Nam aliquet ullamcorper nisl, ac congue leo pellentesque eget. Vestibulum dui massa, pretium at ex id, aliquet mattis ligula. Aenean ut porta elit. Donec pulvinar a augue non bibendum. Morbi pellentesque erat ut leo tincidunt condimentum.
  </div>
</div>

Answer 4

这个有效：

#container{
  width:100%;
  height:100px;
  border:1px solid black;
}
#header{
  width:100%;
  background:grey;
  height:20px;
}
.fourth{
  width:25%;
  height:100px;
  float:left;
}
.half{
  width:50%;
  height:100px;
  border-left:1px solid grey;
  border-right:1px solid grey;
  float:left;
}

<div id="container">
  <div id="header"><div>
  <div class="fourth"></div>
  <div class="half"></div>
  <div class="fourth"></div>
</div>

HTML 制作一个三部分内容框

HTML Make a three section Content box

html

css

line

box