每个 div 元素的高度不相等

Question

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

屏幕：Not equal height of elements

怎么办？它有什么问题？我处理这个问题的方法（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

去掉包裹第一个元素的 <nav></nav> 并将 display: flex 添加到 #blocks。这将使其直接子级填充所有垂直 space.

示例：JSBin

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

只需将 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 4

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

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

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

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

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

Answer 5

这里的问题是 div 的内容。 white-space 处理不当。将其更改为其他内容。

<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 元素的高度不相等

Not equal height of each div's element

html

css

block

footer