项目未水平对齐

Question

这4个div的宽度为23％，以内联块显示，高度为220px，边距为0。问题是它们未水平对齐

我已经尝试过更改高度和宽度，并删除了边距，但这不能解决问题。



看起来像这样...

.aside-column {
  width: 23%;
  display: inline-block;
  height: 220px;
  margin: 0;
}

<div class="aside-column aside-column1">
  <h4>Lufthansa vs Airbus</h4>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, exercitationem nulla? Ea rerum necessitatibus ratione optio iure. Aliquid?</p>
  <div class="aside-readMore">
    <a href="">Continue Reading</a>
  </div>
</div>
<div class="aside-column aside-column2">
  <h4>Bill Gates History</h4>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero in labore assumenda tempora nostrum nisi possimus saepe dolor incidunt voluptatem, iure cum atque!</p>
  <div class="aside-readMore">
    <a href="">Continue Reading</a>
  </div>
</div>
<div class="aside-column aside-column3">
  <h4>Tescos Stabbing</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed quis quaerat quo reprehenderit?</p>
  <div class="aside-readMore">
    <a href="">Continue Reading</a>
  </div>
</div>
<div class="aside-column aside-column4">
  <h4>Amazon Forest Fire</h4>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur aliquid sint tenetur.</p>
  <div class="aside-readMore">
    <a href="">Continue Reading</a>
  </div>
</div>

Answer 1

将vertical-align:top;授予.aside-column类。

.aside-column {
  width: 23%;
  display: inline-block;
  height: 220px;
  margin: 0;
  vertical-align:top;
}

<div class="aside-column aside-column1">
  <h4>Lufthansa vs Airbus</h4>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, exercitationem nulla? Ea rerum necessitatibus ratione optio iure. Aliquid?</p>
  <div class="aside-readMore">
    <a href="">Continue Reading</a>
  </div>
</div>
<div class="aside-column aside-column2">
  <h4>Bill Gates History</h4>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero in labore assumenda tempora nostrum nisi possimus saepe dolor incidunt voluptatem, iure cum atque!</p>
  <div class="aside-readMore">
    <a href="">Continue Reading</a>
  </div>
</div>
<div class="aside-column aside-column3">
  <h4>Tescos Stabbing</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed quis quaerat quo reprehenderit?</p>
  <div class="aside-readMore">
    <a href="">Continue Reading</a>
  </div>
</div>
<div class="aside-column aside-column4">
  <h4>Amazon Forest Fire</h4>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur aliquid sint tenetur.</p>
  <div class="aside-readMore">
    <a href="">Continue Reading</a>
  </div>
</div>

Answer 2

您还可以使用父容器，即flexbox。

.container {
  display: flex;
}

.aside-column {
  width: 23%;
  height: 220px;
  margin: 1%;
}

<div class="container">
  <div class="aside-column aside-column1">
    <h4>Lufthansa vs Airbus</h4>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, exercitationem nulla? Ea rerum necessitatibus ratione optio iure. Aliquid?</p>
    <div class="aside-readMore">
      <a href="">Continue Reading</a>
    </div>
  </div>
  <div class="aside-column aside-column2">
    <h4>Bill Gates History</h4>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero in labore assumenda tempora nostrum nisi possimus saepe dolor incidunt voluptatem, iure cum atque!</p>
    <div class="aside-readMore">
      <a href="">Continue Reading</a>
    </div>
  </div>
  <div class="aside-column aside-column3">
    <h4>Tescos Stabbing</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed quis quaerat quo reprehenderit?</p>
    <div class="aside-readMore">
      <a href="">Continue Reading</a>
    </div>
  </div>
  <div class="aside-column aside-column4">
    <h4>Amazon Forest Fire</h4>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur aliquid sint tenetur.</p>
    <div class="aside-readMore">
      <a href="">Continue Reading</a>
    </div>
  </div>
</div>