如何将一行中的 3 列居中？

Question

如何将一行中的 3 列居中？

lis*_*077 1 css multiple-columns css-float flexbox

我的页脚有问题：我想要在 div 行内有 3 个居中的列。这是代码。

.col-1 {
    float: left;
    width: 20%;
    padding: 5px;
    height: 100px;
}

.col-2 {
    float: left;
    width: 40%;
    padding: 5px;
    height: 100px;
}

Run Code Online (Sandbox Code Playgroud)

<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 -->

Run Code Online (Sandbox Code Playgroud)

如果我把float: left柱子放在上面，我的背景就不会显得黑色。

我怎么解决这个问题？它也不适用于 Flex。

Answer 1

Joh*_*rch 5

使用 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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	7 年，6 月前
查看次数：	4330 次
最近记录：	7 年，4 月前