尝试垂直对齐 3 个div。 我得到了一个容器div，其中包括 3 个div 和一个页脚。 我试图给它们最大宽度，将它们全部向左或向右浮动，浮动容器，丢失页脚，但它只是不起作用。 此外，当我尝试将长文本放入其中时，事情很快就会出错。 此外，需要保持它对窗口大小变化的响应。 有什么想法吗？
.container{
background-color: gray;
height: auto;
text-align: center;
margin: 0 auto;
float: center;
max-width: 90%;
}
.personalInfo{
background-color: white;
float: left;
max-width: 33%;
}
.hobbies{
background-color: blue;
float: center;
max-width: 33%;
}
.movies{
float: right;
background-color: green;
max-width: 33%;
}
.footer{
clear: both;
height: 50px;
background-color: aquamarine;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My App</title>
<link rel="stylesheet" href="t.css" />
</head>
<body>
<div class="container">
<div class="personalInfo">personalInfo<br/>Miusov, as a man man of breeding</div>
<div class="hobbies">hobbies<br/>Miusov, as a man man of breeding and deilcacy, </div>
<div class="movies">movies<br/>Miusov, as a man man of breeding and deilcacy, could n</div>
<div class="footer">footer</div>
</div>
</body>
<script src="j.js"></script>
</html>对于基于flexbox的布局来说，这是一个很好的用例，如下所示：
.container {
background-color: gray;
text-align: center;
margin: 0 auto;
max-width: 90%;
display: flex;
flex-wrap: wrap;
}
.personalInfo {
background-color: white;
}
.hobbies {
background-color: blue;
}
.movies {
background-color: green;
}
.personalInfo,
.hobbies,
.movies {
flex: 0 0 calc(100% / 3);
}
.footer {
height: 50px;
background-color: aquamarine;
flex: 0 0 100%;
}<div class="container">
<div class="personalInfo">personalInfo<br/>Miusov, as a man man of breeding</div>
<div class="hobbies">hobbies<br/>Miusov, as a man man of breeding and deilcacy, </div>
<div class="movies">movies<br/>Miusov, as a man man of breeding and deilcacy, could n</div>
<div class="footer">footer</div>
</div>