Question

我做了一个分隔为3个区块的页脚。但它们的高度并不相等，所以边界线的高度也不相等。

怎么办？这有什么问题？我处理这个问题的方法（以一个页脚块为中心的3个内容块）是不是很糟糕？

代码：

<html>
<head>
</head>
<body>
<style>
#footer {
    height: auto;
    width: 100%;
    background-color: #55585d;
    margin-top: 30px;
    display: table;
}
#blocks {
    margin-left: auto;
    margin-right: auto;
    width: 1120px;
}
.f-block {
    box-sizing: border-box;
    width: 373px;
    float: left;
    padding: 30px;
    text-align: center;
    border-right: 1px solid #000000;
}
</style>
<footer>
    <div id="footer">
        <div id="blocks">
            <nav>
                <div class="f-block">
                    asdasdaasdfghfghfghfghfghfghfghf
                </div>
            </nav>
            <div class="f-block">asdasdaaaaaaaaaaa aaaaaaaaaaaaaa aaaaaaaaaaasada
            </div>
            <div class="f-block">asdasdasd aaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaa aaaaaaaa
            </div>
        </div>
    </div>
</footer>
</body>
</html>

Answer 1

移除左边的浮动，在子f块上添加display: table-cell;，使它们具有相同的高度（最高的一个决定所有其他单元格的高度）。

同时删除<nav></nav>或仅删除<nav class="f-block"><div></div></nav>

使用.f-block:nth-of-type(1)选择第一个f-block添加border-left

.f-block:nth-of-type(1) {
  border-left: 1px solid #000000;
}

＆＃13;

<html>

<head>
</head>

<body>
  <style>
    #footer {
      height: auto;
      width: 100%;
      background-color: #55585d;
      margin-top: 30px;
      display: table;
      text-align: center;
    }
    
    #blocks {
      margin-left: auto;
      margin-right: auto;
      width: 1120px;
    }
    
    .f-block:nth-of-type(1) {
      border-left: 1px solid #000000;
    }
    
    .f-block {
      box-sizing: border-box;
      width: 373px;
      padding: 30px;
      text-align: center;
      border-right: 1px solid #000000;
      display: table-cell;
    }
  </style>
  <footer>
    <div id="footer">
      <div id="blocks">
        <div class="f-block">
          asdasdaasdfghfghfghfghfghfghfghf
        </div>
        <div class="f-block">asdasdaaaaaaaaaaa aaaaaaaaaaaaaa aaaaaaaaaaasada
        </div>
        <div class="f-block">asdasdasd aaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaa aaaaaaaa
        </div>
      </div>
    </div>
  </footer>
</body>

</html>

＆＃13;

Answer 2

footer和#footer似乎是多余的，所以我将这些结合起来。 .f-block应该在nav上，因为它与其他.f-block相邻。将display: flex添加到父级会导致他们拉伸他们的高度以匹配他们的兄弟。

#footer {
  height: auto;
  width: 100%;
  margin-top: 30px;
  background-color: #55585d;
}

#blocks {
  margin-left: auto;
  margin-right: auto;
  width: 1120px;
  display: table;
  
}

.f-block, nav {
  box-sizing: border-box;
  width: 373px;
  padding: 30px;
  text-align: center;
  border-right: 1px solid #000000;
  display: table-cell;
}

<footer id="footer">
    <div id="blocks">
      <nav>
        <div>
          asdasdaasdfghfghfghfghfghfghfghf
        </div>
      </nav>
      <div class="f-block">asdasdaaaaaaaaaaa aaaaaaaaaaaaaa aaaaaaaaaaasada
      </div>
      <div class="f-block">asdasdasd aaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaa aaaaaaaa
      </div>
    </div>
</footer>

Answer 3

摆脱包裹第一个元素的<nav></nav>并将display: flex添加到#blocks。这将使其直接的孩子填满所有垂直空间。

示例：JSBin

Answer 4

只需将max-height或min-height添加到页脚块：

#footer {
    height: auto;
    width: 100%;
    background-color: #55585d;
    margin-top: 30px;
    display: table;
}
#blocks {
    margin-left: auto;
    margin-right: auto;
    width: 1120px;
}
.f-block {
    box-sizing: border-box;
    width: 373px;
    float: left;
    padding: 30px;
    text-align: center;
    border-right: 1px solid #000000;
    min-height: 96px;
}

<html>
<head>
</head>
<body>
<footer>
    <div id="footer">
        <div id="blocks">
            <nav>
                <div class="f-block">
                    asdasdaasdfghfghfghfghfghfghfghf
                </div>
            </nav>
            <div class="f-block">asdasdaaaaaaaaaaa aaaaaaaaaaaaaa aaaaaaaaaaasada
            </div>
            <div class="f-block">asdasdasd aaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaa aaaaaaaa
            </div>
        </div>
    </div>
</footer>
</body>
</html>

Answer 5

这里的问题是div的内容。空白处理不当。将其改为别的东西。

<footer>
    <div id="footer">
        <div id="blocks">
            <nav>
                <div class="f-block">asdasdasd aaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaa aaaaaaaa
                </div>
            </nav>
            <div class="f-block">asdasdaaaaaaaaaaa aaaaaaaaaaaaaa aaaaaaaaaaasada
            </div>
            <div class="f-block">asdasdasd aaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaa aaaaaaaa
            </div>
        </div>
    </div>
</footer>

每个div元素的高度不相等

5 个答案: