html - 将 div float 在父元素的顶部

Question

如何将 informationbox 中的所有 div“推”到顶部，如下面的代码所示:

我试图搜索这样的问题，但我找不到任何解决我问题的方法

.informationbox {
  margin: 10px 0 20px 0;
  text-align: center;
}
.informationbox > div {
  margin: 0 15px;
  width: 100px;
}

.informationbox > div:first-of-type {
  margin-left: 0;
}

.informationbox > div:last-of-type {
  margin-right: 0;
}

.informationbox .infotitle, .infotext {
  text-align: left;
  margin: 0;
}

.informationbox .infotitle{
  font-size: 16px;
  font-weight: 600;
  margin-top: 5px;
}

<div class="informationbox">
  <div style="display: inline-block;">
    <img style="width: 100%; height: auto" src="https://c1.staticflickr.com/1/342/19541848580_7f925817c9_b.jpg" />
    <p class="infotitle">Something</p>
    <p class="infotext">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna </p>
  </div>
  <div style="display: inline-block;">
    <img style="width: 100%; height: auto" src="https://c1.staticflickr.com/1/342/19541848580_7f925817c9_b.jpg" />
    <p class="infotitle">Something</p>
    <p class="infotext">Wall of Text</p>
  </div>
  <div style="display: inline-block;">
    <img style="width: 100%; height: auto" src="https://c1.staticflickr.com/1/342/19541848580_7f925817c9_b.jpg" />
    <p class="infotitle">Something</p>
    <p class="infotext">Wall of Text</p>
  </div>
</div>

Answer 1

为此添加vertical-align: top:

.informationbox > div {
  ...
  vertical-align: top;
}

.informationbox {
  margin: 10px 0 20px 0;
  text-align: center;
}
.informationbox > div {
  margin: 0px 15px;
  width: 100px;
  vertical-align: top;
}

.informationbox > div:first-of-type {
  margin-left: 0px;
}

.informationbox > div:last-of-type {
  margin-right: 0px;
}

.informationbox .infotitle, .infotext {
  text-align: left;
  margin: 0;
}

.informationbox .infotitle{
  font-size: 16px;
  font-weight: 600;
  margin-top: 5px;
}

<div class="informationbox">
  <div style="display: inline-block;">
    <img style="width: 100%; height: auto" src="https://c1.staticflickr.com/1/342/19541848580_7f925817c9_b.jpg" />
    <p class="infotitle">Something</p>
    <p class="infotext">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna </p>
  </div>
  <div style="display: inline-block;">
    <img style="width: 100%; height: auto" src="https://c1.staticflickr.com/1/342/19541848580_7f925817c9_b.jpg" />
    <p class="infotitle">Something</p>
    <p class="infotext">Wall of Text</p>
  </div>
  <div style="display: inline-block;">
    <img style="width: 100%; height: auto" src="https://c1.staticflickr.com/1/342/19541848580_7f925817c9_b.jpg" />
    <p class="infotitle">Something</p>
    <p class="infotext">Wall of Text</p>
  </div>
</div>