<分区>
标签 javascript html css
我有三个 div，我希望它们垂直对齐(如 3 列)，并将大小设置为左侧和右侧的 25%，中间的 50%。 此外，我希望它们是无限的和可滚动的，并且每个列都可以根据其他列调整自己的大小。
最佳答案
使用 Flex 盒子非常容易。 检查this awesome guide here
/* Normalize */
html,body {
height: 100%;
margin: 0;
padding: 0;
}
/* Flex power */
.flex-container {
display: flex;
flex-direction: column;
height: 100%;
}
.flex-container > * {
width: 100%; /* Not mandatory, but to be sure */
}
.flex-25 {
height: 25%;
background: red;
}
.flex-50 {
height: 50%;
background: blue;
}<div class="flex-container">
<div class="flex-25">
</div>
<div class="flex-50">
</div>
<div class="flex-25">
</div>
</div>/* Normalize */
html,body {
height: 100%;
margin: 0;
padding: 0;
line-height: 2em;
}
/* Flex power */
.flex-container {
display: flex;
align-items: stretch;
min-height: 100%;
}
.flex-25 {
width: 25%;
background: #333;
color: #EEE;
}
.flex-50 {
width: 50%;
background: #EEE;
}<div class="flex-container">
<div class="flex-25">
<p>Not much here</p>
</div>
<div class="flex-50">
<p>To infinity<br/>and infinity<br/>and infinity<br/>and infinity<br/>and infinity<br/>and infinity<br/>and infinity<br/>and infinity<br/>and infinity<br/>and infinity<br/>and infinity<br/>and infinity<br/>..<br/>..<br/>..<br/>..</p>
</div>
<div class="flex-25">
</div>
</div>关于javascript - 是否可以垂直拆分主要的 25%/50%/25%？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54911634/