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拉伸的对齐。我希望你明白我所说的这一切是什么意思。

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

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

标签： htmlcss

Answer 1

你可以通过使用 flexbox、flex-direction 和 flex-grow 来做到这一点。

display: flex;将and添加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>