HTML布局与垂直分隔符和菜单之间的部分-如何

有人能告诉我们如何实现这样的HTML布局吗？我不知道如何在"左"one_answers"右"之间创建菜单部分。

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

我使用这个作为基本结构（这只是我目前的尝试，所以如果需要的话可以更改）：

<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实现，我将不胜感激。

当然，它应该做出回应。

提前感谢！

也许你至少可以用它来启动一些东西：

<!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>

相关内容

最新更新

热门标签：