我正在做一个网站。 我想把网站分成两个不同宽度的栏目，都是相同的高度。 所以不管是右列还是左列有更多的文本，我都希望它们的水平长度相等。
我的代码:
null
body {
background-color: #003399;
color: #FFCC00;
margin: 0;
padding: 0;
}
.main-part {
float: left;
width: 60%;
border-right-style: solid;
border-right-color: #FFCC00;
border-right-width: 3px;
margin-right: 10px;
height: 100%;
min-height: 100%;
}
.additional-part {
height: 100%;
min-height: 100%;
/* margin-left: 10px; */
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="main-part">
<h1>Main text</h1>
</div>
<div class="additional-part">
<h1>Additional text</h1>
<p>Aaaaa</p>
<p>Aaaaa</p>
<p>Aaaaa</p>
<p>Aaaaa</p>
<p>Aaaaa</p>
<p>Aaaaa</p>
</div>
</div>
</body>
</html>null
问题:
>
右列（如左边的border-right属性和“aaaaa”所示）一直在运行，直到它完成文本，然后它突然结束，左列取而代之，而不是像我希望的那样保持在左侧。 它想要两个相同大小的列，目前我有一个“盒子”在右边和“跳跃”div在左边，这是不保持自己。
我不知道为什么，但是当我看右顶标头和左顶标头（我说的是主要文本和附加文本元素）时，它们位于两个独立的级别上，右比左低。 我希望他们开始在相同的“高度”对称和好看。
这里有grid-box，它让我们制作特定的列和行，然后根据我们的意愿插入内容，这是制作网格布局的最好方法
null
body {
height: 100vh;
}
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
background: darkcyan;
width: 100%;
height: 100%;
}
.main-part {
width: 100%;
border: 1px solid red;
text-align: center;
}
.additional-part {
text-align: center;
width: 100%;
border: 1px solid blue;
}<div class="container">
<div class="main-part">
<h1>Main text</h1>
</div>
<div class="additional-part">
<h1>Additional text</h1>
<p>Aaaaa</p>
<p>Aaaaa</p>
<p>Aaaaa</p>
<p>Aaaaa</p>
<p>Aaaaa</p>
<p>Aaaaa</p>
</div>
</div>
如果您正在使用bootstrap 4<； 不，您可以使用。row和。col
否则，请尝试以下操作
.container{
display: flex;
flex-flow: row wrap;
}
.main-part, .additional-part {
background-color: red;
}
100%是父元素（body）的100%，但是body正在调整它的大小以适应其子元素。 您应该改用min-height:100VH。
另外，除了图像和文本中的“简介”，不要使用float。 在本例中，我将使用display:flex来定位元素。
