无法垂直对齐内联块 div

Question

我正在阅读如何将 div 彼此对齐，一些帖子建议使用 inline-block 而不是 float。所以我尝试做同样的事情，但是 div 的垂直对齐不起作用。这是我的代码示例：

.container *{
  padding: 0px; 
  margin: 0px; 
  box-sizing: border-box;
}

.headers, .items{
  list-style-type: none;
}

.tile{
  background: #27ae60; 
  width: 200px; 
  min-height: 200px;
  border-radius: 5px;
  padding: 5px 0px 5px 5px; 
  margin: 0px 5px 5px 0px;
  display: inline-block;

}

.tile a, .tile span{
  color: white; 
  text-decoration: none;
}

.bold{
  font-weight: bold;
}

a.iconOpener{
  color: blue;
}

<div class="container">
  <div class="tile">
    <h2>test</h2>
    <h2>test</h2>
    <h2>test</h2>
    <h2>test</h2>
    <h2>test</h2>
    <h2>test</h2>
    <h2>test</h2>

  </div>
  <div class="tile">
    <ul class="headers">
      <li class="header">
        <span> *  </span><span class="headerText">header 1</span>
        <a href="#" class="headerLink bold iconOpener" title="Open link in new tab">&#10532;</a>
      </li>
      <li class="header">
        <span> + </span> <span class="headerText">header 1</span>
        <a href="#" class="headerLink bold iconOpener" title="Open link in new tab">&#10532;</a>

        <ul class="items">
          <li class="item">
            <a href="#" class="itemLink">item 1</a>
          </li>
          <li class="item">
            <a href="#" class="itemLink">item 2</a>
          </li>
          <li class="item">
            <a href="#" class="itemLink">item 3</a>
          </li>
        </ul>
      </li>
      <li class="header">
        <span> + </span><span class="headerText">header 1</span>
      </li>
    </ul>
  </div>

</div>

我在这里做错了什么？此外，如果有任何其他推荐的方法来实现如何实现磁贴，我们将不胜感激。

谢谢。

Answer 1

您需要将行 vertical-align:top 添加到 css 中的 .tile class。然后就可以了:)见片段

.container * {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}

.headers,
.items {
  list-style-type: none;
}

.tile {
  vertical-align: top; /*added this*/
  background: #27ae60;
  width: 200px;
  min-height: 200px;
  border-radius: 5px;
  padding: 5px 0px 5px 5px;
  margin: 0px 5px 5px 0px;
  display: inline-block;
}

.tile a,
.tile span {
  color: white;
  text-decoration: none;
}

.bold {
  font-weight: bold;
}

a.iconOpener {
  color: blue;
}

<div class="container">
  <div class="tile">
    <h2>test</h2>
    <h2>test</h2>
    <h2>test</h2>
    <h2>test</h2>
    <h2>test</h2>
    <h2>test</h2>
    <h2>test</h2>

  </div>
  <div class="tile">
    <ul class="headers">
      <li class="header">
        <span> *  </span><span class="headerText">header 1</span>
        <a href="#" class="headerLink bold iconOpener" title="Open link in new tab">&#10532;</a>
      </li>
      <li class="header">
        <span> + </span> <span class="headerText">header 1</span>
        <a href="#" class="headerLink bold iconOpener" title="Open link in new tab">&#10532;</a>

        <ul class="items">
          <li class="item">
            <a href="#" class="itemLink">item 1</a>
          </li>
          <li class="item">
            <a href="#" class="itemLink">item 2</a>
          </li>
          <li class="item">
            <a href="#" class="itemLink">item 3</a>
          </li>
        </ul>
      </li>
      <li class="header">
        <span> + </span><span class="headerText">header 1</span>
      </li>
    </ul>
  </div>

</div>

无法垂直对齐内联块 div

Cannot vertical align inline-block divs

html

css

vertical-alignment