我正在为我的网络应用程序创建一个主页。我正在为它考虑 3 个垂直拆分布局。我有一些代码可以创建 3 个水平拆分，但是，我的目标是创建 3 个垂直拆分。我怎样才能做到这一点？
下图是创建 3 个水平拆分，但我的目标还是创建 3 个垂直拆分。
body,
html {
height: 100%;
padding: 0;
margin: 0;
}<body>
<div style="width:100%; height :100%; background-color:Lime;">
<div style="width:100%; height:34%; background-color:Blue;">
a
</div>
<div style="width:100%; height:33%; background-color:Gray;">
b
</div>
<div style="width:100%; height:33%; background-color:Aqua;">
c
</div>
</div>
</body>预期的输出是 3 个垂直拆分布局。
最佳答案
有几种方法可以实现这一点。一种是使用 inline-block 级别显示来排列您的 div。这里的高度是任意的。请考虑以下事项:
body,
html {
height: 100%;
padding: 0;
margin: 0;
}
.column {
display:inline-block;
width:33.33%;
margin-right:-4px;
height:500px;
}
.column-a {background-color:Blue;}
.column-b {background-color:Gray;}
.column-c {background-color:Aqua;}<body>
<div class="container">
<div class="column column-a">
a
</div>
<div class="column column-b">
b
</div>
<div class="column column-c">
c
</div>
</div>
</body>另一种方法是使用 flex 显示。这是一个fiddle用一个简单的例子。您可以使用相同的标记，但将您的 css 更改为:
body,
html {
height: 100%;
padding: 0;
margin: 0;
}
.container {
display:flex;
}
.column {
flex:1;
height:100vh;
}
.column-a {background-color:Blue;}
.column-b {background-color:Gray;}
.column-c {background-color:Aqua;}
关于html - 使用 html 和 css 创建 3 个垂直拆分布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57440371/