如何解决不管怎样,页脚都向右浮动
我正在尝试将 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
并且它有效。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。