HTML 部分之间带有垂直分隔线和菜单的布局 - 怎么样？

Question

有人可以给出一些如何实现 HTML 布局 like this 的提示吗？我不明白如何在 "left" 和 "right" 之间创建菜单部分。

菜单可以浮动也可以不浮动，没关系。

我将其用于基本结构（这只是我目前的尝试，因此可以根据需要进行更改）：

<style>
body, html{
    margin: 0;
    height: 100%;
}    
    
#left {
    background-color:#eeeeee;
    float:left;
    width:50%
}
#right {
    background-color:#999999;
    float:right;
    width:50%
}
</style>

<html>
<body>
    <div id="left">
        <p>This should go to left.</p>
    </div>
    <div id="right">
        <p>This should go to right.</p>
    </div>
</body>
</html>

如果仅由 HTML5 和 CSS 实现，我将不胜感激。

当然应该是响应式的。

提前致谢！

Answer 1

也许你至少可以用它来开始一些事情：

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
        * {
            margin: 0;
            padding: 0;
            border: 0;
        }
        #left {
            background-color: green;
            width: 50%;
            height: 100vh;
            float: left;
        }
        #right {
            background-color: orange;
            width: 50%;
            height: 100vh;
            float: right;
        }
        #center {
            background-color: gray;
            width: 20%;
            height: 30%;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -15%;
            margin-left: -10%;
        }
    </style>
  </head>
<body>
    <div id="left">TEST A</div>
    <div id="center">TEST B</div>
    <div id="right">TEST C</div>
</body>
</html>

HTML 部分之间带有垂直分隔线和菜单的布局 - 怎么样？

HTML layout with vertical divider and menu between sections - how?

html

css

layout

vertical-alignment