html - 页脚未正确显示列 (CSS)

Question

我正在尝试将 4 列页脚放在一起。但是，我正在努力使列和其中的元素完全对齐。由于某种原因，第二列低于第一列。像这样:

#footer_wrapper {
  width: 100%;
  height: 502px;
  min-width: 960px;
}
.line_breaker {
  display: block;
  width: 100%;
  height: 50px;
  border-bottom: 2px solid orangered;
}
/* ----------- THE 4 LOGO CONTAINER--------------------*/

.logo_container {
  display: block;
  height: 150px;
  width: 100%;
}
.logo_container img {
  margin: 50px 0 50px 10%;
  height: 50px;
}
/* ----------- THE 4 COLUMNS --------------------------*/

.content_container {
  position: relative;
  display: block;
  width: 80%;
  margin: 0px 10%;
  height: 300px;
  text-align: center;
}
.footer_column {
  display: inline-block;
  height: 350px;
  width: 18%;
  margin: 20px 1%;
}
.column_item_wrapper {
  position: relative;
  width: 100%;
  height: 30px;
}
.column_item_square {
  display: inline;
  float: left;
  margin: 1px 10px 10px 0px;
  width: 15px;
  height: 15px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  border: 2px solid orangered;
}
.column_item_text {}

<footer>
  <div id="footer_wrapper">
    <div class="line_breaker"></div>
    <div class="logo_container">
      <img id="logo" src="images/brand.png">
    </div>
    <div class="content_container">
      <div class="footer_column">
        <div class="column_item_wrapper">
          <div class="column_item_square"></div>
          <a href="#" class="column_item_text">
            <span>About Us</span>
          </a>
        </div>
        <div class="column_item_wrapper">
          <div class="column_item_square"></div>
          <a href="#" class="column_item_text">
            <span>About Us</span>
          </a>
        </div>
      </div>
      <div class="footer_column">
        <div class="column_item_wrapper">
          <div class="column_item_square"></div>
          <a href="#" class="column_item_text">
            <span>About Us</span>
          </a>
        </div>
      </div>
      <div class="footer_column">
        Column 1
      </div>
      <div class="footer_column">
        Column 1
      </div>
    </div>
  </div>
</footer>

这是我的 HTML:

谁能帮我弄清楚为什么第二列元素开始低于第一列？

Answer 1

将 vertical-align: top 添加到 footer_column 类或使用 inline-table 而不是 inline-block。

默认情况下，行内 block 元素在它们之间生成空格，因此是问题的原因。在这里了解更多信息:Space between inline-block elements

.footer_column {
  display: inline-block; /* or inline-table */
  height: 350px;
  width: 18%;
  margin: 20px 1%;
  vertical-align: top; /* Add */
}

#footer_wrapper {
  width: 100%;
  height: 502px;
  min-width: 960px;
}
.line_breaker {
  display: block;
  width: 100%;
  height: 50px;
  border-bottom: 2px solid orangered;
}
/* ----------- THE 4 LOGO CONTAINER--------------------*/

.logo_container {
  display: block;
  height: 150px;
  width: 100%;
}
.logo_container img {
  margin: 50px 0 50px 10%;
  height: 50px;
}
/* ----------- THE 4 COLUMNS --------------------------*/

.content_container {
  position: relative;
  display: block;
  width: 80%;
  margin: 0px 10%;
  height: 300px;
  text-align: center;
}
.footer_column {
  display: inline-block;
  height: 350px;
  width: 18%;
  margin: 20px 1%;
  vertical-align: top;
}
.column_item_wrapper {
  position: relative;
  width: 100%;
  height: 30px;
}
.column_item_square {
  display: inline;
  float: left;
  margin: 1px 10px 10px 0px;
  width: 15px;
  height: 15px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  border: 2px solid orangered;
}
.column_item_text {}

<footer>
  <div id="footer_wrapper">
    <div class="line_breaker"></div>
    <div class="logo_container">
      <img id="logo" src="images/brand.png">
    </div>
    <div class="content_container">
      <div class="footer_column">
        <div class="column_item_wrapper">
          <div class="column_item_square"></div>
          <a href="#" class="column_item_text">
            <span>About Us</span>
          </a>
        </div>
        <div class="column_item_wrapper">
          <div class="column_item_square"></div>
          <a href="#" class="column_item_text">
            <span>About Us</span>
          </a>
        </div>
      </div>
      <div class="footer_column">
        <div class="column_item_wrapper">
          <div class="column_item_square"></div>
          <a href="#" class="column_item_text">
            <span>About Us</span>
          </a>
        </div>
      </div>
      <div class="footer_column">
        Column 1
      </div>
      <div class="footer_column">
        Column 1
      </div>
    </div>
  </div>
</footer>