Question

尝试垂直对齐3格。我有一个包含3个div和一个页脚的容器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>

Answer 1

这是基于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>

CSS 3 divs无法对齐

1 个答案: