html - 使用 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 与拉伸(stretch)的那个对齐。我希望你明白我所说的这一切是什么意思。

我不介意使用 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>