问题描述
我正在尝试将 section 中的一些项目水平对齐，然后将 div 中的一些项目水平对齐，但在将它们浮动到 left 并将 footer 标记放入之后文档的底部。footer 总是 floats 到 right 和内容的一侧，如果我尝试将部分的 width 增加到 40 % 或更多它只是将 section 的内容推到底部而不是页脚
HTML
<body>
<section id="Box">
<div class="container">
<div class="Box">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png"
height="150px" alt="">
<h3>HTML markup</h3>
<p>Lorem ipsum dolor sit amet consectetur,adipisicing elit. At laboriosam quod debitis quae odit
nesciunt alias quas facere pariatur exercitationem.</p>
</div>
<div class="Box">
<div class="Box"></div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/CSS3_logo_and_wordmark.svg/1200px-CSS3_logo_and_wordmark.svg.png"
alt="" height="150px">
<h3>CSS3</h3>
<p>Lorem ipsum dolor sit amet consectetur,adipisicing elit. At laboriosam quod debitis quae odit
nesciunt alias quas facere pariatur exercitationem.</p>
</div>
<div class="Box">
<img src="https://designrfix.com/wp-content/uploads/2018/01/Graphic-_Design.jpg" height="140px" alt="" w>
<h3>Grahpic</h3>
<p>Lorem ipsum dolor sit amet consectetur,adipisicing elit. At laboriosam quod debitis quae odit
nesciunt alias quas facere pariatur exercitationem.</p>
</div>
</div>
</section>
<footer>Testing testing testing:: copyright 2017 ©</footer>
</body>
CSS
#Box .Box {
float: left;
width: 30%;
padding: 10px;
text-align: center;
}
解决方法
我更喜欢将 flexbox 用于这种布局。该部分可以由 div 包裹并使用 display: flex; 推开 <footer>（检查 flex-center 类）。我还建议您使用 display: flex;、flex-direction: column; 和 text-align: center; 来垂直对齐和居中每个内容（检查 flex-col 类）。此外，如果某些图像可能被拉伸，您可以使用 object-fit: contain; 进行修复。此外，我通过 position: fixed; left: 0; bottom: 0; 将页脚位置固定在底部（检查 css 中的 footer）。
((((另外，每列之间最好有更多的空格。)))
#box .box {
/* float: left;
width: 30%;
padding: 10px;
/* text-align: center; */
}
.flex-center {
margin: auto;
display: flex;
justify-content: center;
}
.flex-col {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
.flex-col img {
object-fit: contain;
}
footer {
text-align: center;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #ffffff;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<title>Static Template</title>
</head>
<body>
<section class="" id="box">
<div class="container flex-center">
<div class="box flex-col">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png"
height="150px"
alt=""
/>
<h3>HTML markup</h3>
<p>
Lorem ipsum dolor sit amet consectetur,adipisicing elit. At
laboriosam quod debitis quae odit nesciunt alias quas facere
pariatur exercitationem.
</p>
</div>
<div class="box flex-col">
<!-- <div class="box"></div> -->
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/CSS3_logo_and_wordmark.svg/1200px-CSS3_logo_and_wordmark.svg.png"
alt=""
height="150px"
/>
<h3>CSS3</h3>
<p>
Lorem ipsum dolor sit amet consectetur,adipisicing elit. At
laboriosam quod debitis quae odit nesciunt alias quas facere
pariatur exercitationem.
</p>
</div>
<div class="box flex-col">
<img
src="https://designrfix.com/wp-content/uploads/2018/01/Graphic-_Design.jpg"
height="140px"
alt=""
w
/>
<h3>Grahpic</h3>
<p>
Lorem ipsum dolor sit amet consectetur,adipisicing elit. At
laboriosam quod debitis quae odit nesciunt alias quas facere
pariatur exercitationem.
</p>
</div>
</div>
</section>
<footer>Testing testing testing:: copyright 2017 ©</footer>
</body>
</html>我在 clear:both 中使用了 footer 并且它有效。