我的页脚有问题:我想在一个 div 行中居中放置 3 个列。这是代码。
.col-1 {
float: left;
width: 20%;
padding: 5px;
height: 100px;
}
.col-2 {
float: left;
width: 40%;
padding: 5px;
height: 100px;
}<footer>
<div class="row bg-black">
<div class="col-2">
<div class="social-box">
<div><p>Connect with us:</p></div>
<div>
<div><img src="assets/twitter.png" alt=""></div>
<div><img src="assets/linkedin.png" alt=""></div>
</div>
</div>
</div>
<div class="col-1">
<p>dsds</p>
</div>
<div class="col-1">
<p>dsds</p>
</div>
</div>
<div class="row"></div>
</footer> <!-- END FOOTER -->如果我将 float: left 放在列上，我的背景不会显示为黑色。
我该如何解决这个问题？它也不适用于 flex。
最佳答案
使用 flexbox 将 col 元素居中并添加一些小样式以使行背景颜色变为黑色(该元素需要一个大小来显示背景)
.row {
width: 100vmax;
height: 100px;
margin-left: -8px;
display: flex;
justify-content: center;
}
.bg-black {
background-color: black;
}
.col-1 {
color: white;
/*float: left;*/
width: 20%;
padding: 5px;
height: 100px;
}
.col-2 {
color: white;
/*float: left;*/
width: 40%;
padding: 5px;
height: 100px;
}
<!DOCTYPE html>
<html lang="en">
<header>
<meta charset="UTF-8">
<title>Black row</title>
<link rel="stylesheet" href="style.css">
</header>
<body>
<footer>
<div class="row bg-black">
<div class="col-2">
<div class="social-box">
<div>
<p>Connect with us:</p>
</div>
<div>
<div>
<img src="assets/twitter.png" alt="">
</div>
<div>
<img src="assets/linkedin.png" alt="">
</div>
</div>
</div>
</div>
<div class="col-1">
<p>dsds</p>
</div>
<div class="col-1">
<p>dsds</p>
</div>
</div> <!-- Row black -->
<div class="row"></div>
</footer> <!-- END FOOTER -->
</body>
</html>
关于css - 如何将一行中的 3 列居中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50810154/