页脚未正确显示列（CSS）

Question

我正在尝试将4列页脚放在一起。但是我正在努力使列和它们内部的元素完全对齐。出于某种原因，第二列低于第一列。像这样：

＆＃13;

＆＃13;

#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 {}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这是我的HTML：

有人可以帮我弄清楚第二列项目开始低于第一列的原因吗？

Answer 1

将vertical-align: top添加到footer_column类或使用 inline-table 而不是 inline-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 */
}

＆＃13;

＆＃13;

#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 {}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;