无法垂直对齐内嵌块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

您需要在CSS中将行vertical-align:top添加到.tile类中。然后就可以了:)见代码段

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