使用CSS对齐两个容器的项目

Question

我想对齐内部项目，而不使用固定高度（或类似）并且不破坏语义（它应该是正确的结构化/布局（html））。

最好看一个例子来了解我正在尝试做什么。

https://jsfiddle.net/5oth3xag/

HTML：

<div class="list">

  <div class="item">
    <h2 class="heading">Heading</h2>
    <p class="para">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam deserunt facilis animi voluptatibus tempore, et earum commodi doloribus fuga delectus repellat ut eligendi soluta praesentium eum sapiente dolore iste asperiores!</p>
    <div class="something_else">
      This needed to be aligned
    </div>
    <p class="para">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam deserunt facilis animi voluptatibus tempore, et earum commodi doloribus fuga delectus repellat ut eligendi soluta praesentium eum sapiente dolore iste asperiores!</p>
    <a href="#" class="link">This needed to be aligned</a>
  </div>

  <div class="item">
    <h2 class="heading">Heading</h2>
    <p class="para">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam deserunt facilis animi voluptatibus tempore, et earum commodi doloribus fuga delectus repellat ut eligendi soluta praesentium eum sapiente dolore iste asperiores!</p></p>
    <div class="something_else">
      This needed to be aligned
    </div>
    <p class="para">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam deserunt facilis animi voluptatibus tempore, et earum commodi doloribus fuga delectus repellat ut eligendi soluta praesentium eum sapiente dolore iste asperiores!</p>
    <a href="#" class="link">This needed to be aligned</a>
  </div>

</div>

CSS：

html,body,div,h2 {margin:0; padding:0;}
.list {
  display: flex;
  justify-content: center;
}
.item {
  max-width: 200px;
}
.heading {

}
.para {

}
.something_else {
  color: red;
}
.link {

}

我希望This needed to be aligned与其旁边的项目对齐。显然，如果它们是相同的 - 它将是。但是一旦发生了变化，就会刹车。例如：

<div class="list">

  <div class="item">
    <h2 class="heading">Heading</h2>
    <p class="para">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam deserunt facilis animi voluptatibus tempore, et earum commodi doloribus fuga delectus repellat ut eligendi soluta praesentium eum sapiente dolore iste asperiores!</p>
    <div class="something_else">
      This needed to be aligned
    </div>
    <p class="para">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam deserunt facilis animi voluptatibus tempore, et earum commodi doloribus fuga delectus repellat ut eligendi soluta praesentium eum sapiente dolore iste asperiores!</p>
    <a href="#" class="link">This needed to be aligned</a>
  </div>

  <div class="item">
    <h2 class="heading">Heading</h2>
    <p class="para">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam deserunt facilis animi voluptatibus tempore</p>
    <div class="something_else">
      This needed to be aligned
    </div>
    <p class="para">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam deserunt facilis animi voluptatibus tempore, et earum commodi doloribus fuga delectus repellat ut eligendi soluta praesentium eum sapiente dolore iste asperiores!et earum commodi doloribus fuga delectus repellat ut eligendi soluta praesentium eum sapiente dolore iste asperiores!doloribus fuga delectus repellat ut eligendi soluta praesentium eum sapiente dolore iste asperiores!et earum commodi doloribus fuga delectus repellat ut eligendi soluta praesentium eum sapiente dolore iste asperiores!</p>
    <a href="#" class="link">This needed to be aligned</a>
  </div>

</div>

所以，我希望This needed to be aligned与被拉伸的那个对齐。我希望你能理解这一切对我的意义。

我不介意使用flexbox等，只要它支持现代浏览器。

这甚至可能还是我想要过多的CSS？

Answer 1

您可以使用flexbox，flex-direction和flex-grow执行此操作。

将display: flex;和flex-direction: column;添加到.item{}。

为您的第二个.para{}创建一个新类，例如.para2{}。

将flex-grow: 1;添加到.para2{}，然后就可以了。

以下是修改后的代码。

html,body,div,h2 {margin:0; padding:0;}
.list {
  display: flex;
  justify-content: center;
}
.item {
  max-width: 200px;
  flex-direction: column;
  display: flex;
}
.heading {
  
}
.para {
  min-height: 170px;
}
.para2{
  flex-grow: 1;
}
.something_else {
  color: red;
}
.link {
  
}

<div class="list">
  
  <div class="item">
    <h2 class="heading">Heading</h2>
    <p class="para">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam deserunt facilis animi voluptatibus tempore, et earum commodi doloribus fuga delectus repellat ut eligendi soluta praesentium eum sapiente dolore iste asperiores!</p>
    <div class="something_else">
      This needed to be aligned
    </div>
    <p class="para2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam deserunt facilis animi voluptatibus tempore, et earum commodi doloribus fuga delectus repellat ut eligendi soluta praesentium eum sapiente dolore iste asperiores!</p>
    <a href="#" class="link">This needed to be aligned</a>
  </div>
  
  <div class="item">
    <h2 class="heading">Heading</h2>
    <p class="para">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam deserunt facilis animi voluptatibus tempore</p>
    <div class="something_else">
      This needed to be aligned
    </div>
    <p class="para2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam deserunt facilis animi voluptatibus tempore, et earum commodi doloribus fuga delectus repellat ut eligendi soluta praesentium eum sapiente dolore iste asperiores!et earum commodi doloribus fuga delectus repellat ut eligendi soluta praesentium eum sapiente dolore iste asperiores!doloribus fuga delectus repellat ut eligendi soluta praesentium eum sapiente dolore iste asperiores!et earum commodi doloribus fuga delectus repellat ut eligendi soluta praesentium eum sapiente dolore iste asperiores!</p>
    <a href="#" class="link">This needed to be aligned</a>
  </div>
  
</div>