问题描述
我目前正在将我的第一个网站作为学校项目进行制作,并且绝对禁止在我的布局中使用浮点数。所以我有以下页脚:
.footer {
width: 100%;
position: relative;
height: auto;
background-color: #070617;
margin-top: 5px;
}
.footer .col {
width: 190px;
height: auto;
float:left;
Box-sizing: border-Box;
-webkit-Box-sizing: border-Box;
-moz-Box-sizing: border-Box;
padding: 0px 20px 20px 20px;
}
.footer .col h1 {
margin: 0;
padding: 0;
font-family: inherit;
font-size: 12px;
line-height: 17px;
padding: 20px 0px 5px 0px;
color: rgba(255,255,0.2);
font-weight: normal;
text-transform: uppercase;
letter-spacing: 0.250em;
}
.footer .col ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.footer .col ul li {
color: #999999;
font-size: 14px;
font-family: inherit;
font-weight: bold;
padding: 5px 0px 5px 0px;
cursor: pointer;
transition: .2s;
-webkit-transition: .2s;
-moz-transition: .2s;
}
.social ul li {
display: inline-block;
padding-right: 5px !important;
}
.social a {
text-decoration: none;
color:#999999;
}
.social a:hover {
color: #ffffff;
transition: .1s;
-webkit-transition: .1s;
-moz-transition: .1s;
}
.footer .col ul li:hover {
color: #ffffff;
transition: .1s;
-webkit-transition: .1s;
-moz-transition: .1s;
}
.clearfix {
clear: both;
}
<div class="footer">
<div class="contain">
<div class="col">
<h1>Company</h1>
<ul>
<li>About</li>
<li>Social</li>
<li>Get in touch</li>
</ul>
</div>
<div class="col">
<h1>Support</h1>
<ul>
<li>Contact us</li>
</ul>
</div>
<div class="col social">
<h1>Social</h1>
<ul>
<li> <a href="#">Facebook</a></li>
<li> <a href="#">Twitter</a></li>
<li> <a href="#">Instagram</a></li>
<li> <a href="#">Education</a></li>
</ul>
</div>
<div class="clearfix"></div>
</div>
</div>
但是在我的CSS .footer .col中,我使用的是float。如何使用其他类似flexBox的方法获得相同的浮动效果?我已经尝试过诸如证明内容合法性之类的事情,但无法获得相同的结果。
解决方法
您可以尝试使用并阅读Bootstrap文档,以在不使用大量CSS的情况下获得相同的结果,并且不要使用float。 Here您可以调整文本对齐方式,这对您很有用。
检查“ text-right”,“ text-left”,“ text-center”标签,尝试使用引导程序提供的所有这些类,这样就无需创建clase了:)
如果您正在使用引导程序,则必须正确使用此处显示的容器,请更正拼写错误的单词容器:)
<div class="footer">
<div class="container">
<div class="col">
<h1>Company</h1>
<ul>
<li>About</li>
<li>Social</li>
<li>Get in touch</li>
</ul>
</div>
<div class="col">
<h1>Support</h1>
<ul>
<li>Contact us</li>
</ul>
</div>
<div class="col social">
<h1>Social</h1>
<ul>
<li> <a href="#">Facebook</a></li>
<li> <a href="#">Twitter</a></li>
<li> <a href="#">Instagram</a></li>
<li> <a href="#">Education</a></li>
</ul>
</div>
<div class="clearfix"></div>
</div>
</div>
,
您好,broder出色的工作,可以轻松实现flex box:只需在CSS中添加此行,并从页脚中删除浮动,并在注释(“ _”)中使用其他值即可,祝您好运:
.contain {
display: flex;
justify-content: center; /* flex-start(by default )/ flex-end/ center */
}