使用 flexbox 使所有元素具有相同的高度答案

【问题标题】：Using flexbox to get all elements same height使用 flexbox 使所有元素具有相同的高度
【发布时间】：2019-05-12 11:53:15
【问题描述】：

我必须使容器的每个部分在所有容器中都具有相同的高度，并且由于每个容器的内容可能会有很大差异，因此我无法设置硬编码的高度，因为其中一些内部容器仅存在于一个容器中，但不存在为其他添加。如果这可以通过仅使用 CSS 而不使用 javascript 来实现的话感兴趣

到目前为止，我已经尝试过使用 flexbox，但不确定我做错了什么，因为它对我真的不起作用，并且每个容器的高度都不相同，基于最长的容器。

基本上，我必须做的 - 将每个容器匹配到相同的高度。如果某个文本中不存在但在其他中存在需要添加空格在图片中，是这样的 -

目前我有 -

预期（也请注意空格） -

我有 HTML 结构的小提琴代码 - Fiddle code

也许还需要更改一些 HTML 结构才能使其正常工作？（即在带有紫色边框的详细信息容器内移动带有黄色边框的容器？）。最重要的部分是不使用 javascript，而只使用 CSS！

谢谢大家！

我当前的 HTML 结构是这样的（在小提琴中也可见） -

<ul>
  <li class="li-item">
    <div class="li-item-inner">
      <div class="heading">
        <div class="title">Some title text</div>
        <div class="subtitle">Title subtitle goes here</div>
      </div>
      <a href="#" class="photo"><div class="img">Picture here...</div></a>
      <div class="some-extra-block">
        Some extra info for some li-item
      </div>
      <div class="details">
        <div class="price">
          <div class="item-price">15$</div>
        </div>
        <div class="small-images">
          <div class="small-image">Some image here</div>
          <div class="small-image">Some image here</div>
        </div>
        <div class="see-item">
            <a href="#">click here to see item</a>
        </div>
      </div>
    </div>
  </li>
  <li class="li-item">
    <div class="li-item-inner">
      <div class="heading">
        <div class="title">Some title text goes here</div>
        <div class="subtitle">Title subtitle goes here in 2 rows</div>
      </div>
      <a href="#" class="photo"><div class="img">Picture here...</div></a>
      <div class="details">
        <div class="price">
          <div class="item-price">15$</div>
        </div>
        <div class="small-images">
          <div class="small-image">Some image here</div>
          <div class="small-image">Some image here</div>
        </div>
        <div class="see-item">
            <a href="#">click here to see item</a>
        </div>
      </div>
    </div>
  </li>
  <li class="li-item">
    <div class="li-item-inner">
      <div class="heading">
        <div class="title">Some title text goes here</div>
        <div class="subtitle">if subtitle more than 2 rows then gets cut off all the rest and doesn't show it like this </div>
      </div>
      <a href="#" class="photo"><div class="img">Picture here...</div></a>
      <div class="details">
        <div class="price">
          <div class="item-price">15$</div>
        </div>
        <div class="small-images">
          <div class="small-image">Some image here</div>
          <div class="small-image">Some image here</div>
        </div>
        <div class="see-item">
            <a href="#">click here to see item</a>
        </div>
      </div>
    </div>
  </li>
  <li class="li-item">
    <div class="li-item-inner">
      <div class="heading">
        <div class="title">Some title text goes here which will be atleast 3 lines long</div>
        <div class="subtitle">Title subtitle goes here</div>
      </div>
      <a href="#" class="photo"><div class="img">Picture here...</div></a>
      <div class="details">
        <div class="price">
          <div class="before-price">Some text</div>
          <div class="item-price">15$</div>
        </div>
        <div class="small-images">
          <div class="small-image">Some image here</div>
          <div class="small-image">Some image here</div>
        </div>
        <div class="see-item">
            <a href="#">click here to see item</a>
        </div>
      </div>
    </div>
  </li>
  <li class="li-item">
    <div class="li-item-inner">
      <div class="heading">
        <div class="title">Some title text</div>
        <div class="subtitle">Title subtitle goes here</div>
      </div>
      <a href="#" class="photo"><div class="img">Picture here...</div></a>
      <div class="details">
        <div class="price">
          <div class="item-price">15$</div>
        </div>
        <div class="small-images">
          <div class="small-image">Some image here</div>
          <div class="small-image">Some image here</div>
        </div>
        <div class="see-item">
            <a href="#">click here to see item</a>
        </div>
      </div>
    </div>
  </li>
  <li class="li-item">
    <div class="li-item-inner">
      <div class="heading">
        <div class="title">Some title text</div>
        <div class="subtitle">Title subtitle goes here</div>
      </div>
      <a href="#" class="photo"><div class="img">Picture here...</div></a>
      <div class="details">
        <div class="price">
          <div class="item-price">15$</div>
        </div>
        <div class="small-images">
          <div class="small-image">Some image here</div>
          <div class="small-image">Some image here</div>
        </div>
        <div class="see-item">
            <a href="#">click here to see item</a>
        </div>
      </div>
    </div>
  </li>
  <li class="li-item">
    <div class="li-item-inner">
      <div class="heading">
        <div class="title">Some title text</div>
        <div class="subtitle">Title subtitle goes here</div>
      </div>
      <a href="#" class="photo"><div class="img">Picture here...</div></a>
      <div class="some-extra-block">
        Some extra info for some li-item
      </div>
      <div class="details">
        <div class="price">
                  <div class="before-price">Some text</div>
          <div class="item-price">15$</div>
        </div>
        <div class="small-images">
          <div class="small-image">Some image here</div>
          <div class="small-image">Some image here</div>
        </div>
        <div class="see-item">
            <a href="#">click here to see item</a>
        </div>
      </div>
    </div>
  </li>
</ul>

【问题讨论】：

是i.imgur.com/taFG1H0.png您的预期输出吗？
如果您希望在相邻的lis 中对齐每个部分 - 那么这在 CSS 中可能尚无法实现 - 请参阅 the discussion here
@kukkuz 是的，我的意思只是你错过了带有绿色边框的容器，它也应该在相同的高度。
阅读我添加的链接，那里正在讨论一个非常相似的问题，以及一个 CSS 网格解决方案（更改标记） - 与您的情况非常相似
@kukkuz 还没有尝试。今天将尝试使用网格，希望它会工作

标签： html css flexbox

【解决方案1】：

试试这个：

* {
	box-sizing: border-box;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
@supports(flex-wrap:wrap) {
	ul {
	  display: flex;
	  flex-wrap: wrap;
	}
}

.li-item {
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid black;
  width: 23%;
  width: calc(25% - 10px);
  min-width: 11em;

  /* fallback styles */
  display: inline-block;
  vertical-align: top;
}

.li-item-inner {
  border: 1px solid red;
  padding: 7px;
  height: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}

.heading {
  border: 1px solid green;
}

.subtitle {
  overflow: hidden;
  max-height: 32px;
}

.photo {
  border: 1px solid blue;
  display: block;
  width: 100%;
  height: 70px;
}

.some-extra-block {
 border: 1px solid orange;
}

.details {
  border: 1px solid purple;
  margin-top: auto; /* push this element to the bottom when there is extra available space */
}

<ul>
  <li class="li-item">
    <div class="li-item-inner">
      <div class="heading">
        <div class="title">Some title text</div>
        <div class="subtitle">Title subtitle goes here</div>
      </div>
      <a href="#" class="photo"><div class="img">Picture here...</div></a>
      <div class="some-extra-block">
        Some extra info for some li-item
      </div>
      <div class="details">
        <div class="price">
          <div class="item-price">15$</div>
        </div>
        <div class="small-images">
          <div class="small-image">Some image here</div>
          <div class="small-image">Some image here</div>
        </div>
        <div class="see-item">
            <a href="#">click here to see item</a>
        </div>
      </div>
    </div>
  </li>
  <li class="li-item">
    <div class="li-item-inner">
      <div class="heading">
        <div class="title">Some title text goes here</div>
        <div class="subtitle">Title subtitle goes here in 2 rows</div>
      </div>
      <a href="#" class="photo"><div class="img">Picture here...</div></a>
      <div class="details">
        <div class="price">
          <div class="item-price">15$</div>
        </div>
        <div class="small-images">
          <div class="small-image">Some image here</div>
          <div class="small-image">Some image here</div>
        </div>
        <div class="see-item">
            <a href="#">click here to see item</a>
        </div>
      </div>
    </div>
  </li>
  <li class="li-item">
    <div class="li-item-inner">
      <div class="heading">
        <div class="title">Some title text goes here</div>
        <div class="subtitle">if subtitle more than 2 rows then gets cut off all the rest and doesn't show it like this </div>
      </div>
      <a href="#" class="photo"><div class="img">Picture here...</div></a>
      <div class="details">
        <div class="price">
          <div class="item-price">15$</div>
        </div>
        <div class="small-images">
          <div class="small-image">Some image here</div>
          <div class="small-image">Some image here</div>
        </div>
        <div class="see-item">
            <a href="#">click here to see item</a>
        </div>
      </div>
    </div>
  </li>
  <li class="li-item">
    <div class="li-item-inner">
      <div class="heading">
        <div class="title">Some title text goes here which will be atleast 3 lines long</div>
        <div class="subtitle">Title subtitle goes here</div>
      </div>
      <a href="#" class="photo"><div class="img">Picture here...</div></a>
      <div class="details">
        <div class="price">
          <div class="before-price">Some text</div>
          <div class="item-price">15$</div>
        </div>
        <div class="small-images">
          <div class="small-image">Some image here</div>
          <div class="small-image">Some image here</div>
        </div>
        <div class="see-item">
            <a href="#">click here to see item</a>
        </div>
      </div>
    </div>
  </li>
  <li class="li-item">
    <div class="li-item-inner">
      <div class="heading">
        <div class="title">Some title text</div>
        <div class="subtitle">Title subtitle goes here</div>
      </div>
      <a href="#" class="photo"><div class="img">Picture here...</div></a>
      <div class="details">
        <div class="price">
          <div class="item-price">15$</div>
        </div>
        <div class="small-images">
          <div class="small-image">Some image here</div>
          <div class="small-image">Some image here</div>
        </div>
        <div class="see-item">
            <a href="#">click here to see item</a>
        </div>
      </div>
    </div>
  </li>
  <li class="li-item">
    <div class="li-item-inner">
      <div class="heading">
        <div class="title">Some title text</div>
        <div class="subtitle">Title subtitle goes here</div>
      </div>
      <a href="#" class="photo"><div class="img">Picture here...</div></a>
      <div class="details">
        <div class="price">
          <div class="item-price">15$</div>
        </div>
        <div class="small-images">
          <div class="small-image">Some image here</div>
          <div class="small-image">Some image here</div>
        </div>
        <div class="see-item">
            <a href="#">click here to see item</a>
        </div>
      </div>
    </div>
  </li>
  <li class="li-item">
    <div class="li-item-inner">
      <div class="heading">
        <div class="title">Some title text</div>
        <div class="subtitle">Title subtitle goes here</div>
      </div>
      <a href="#" class="photo"><div class="img">Picture here...</div></a>
      <div class="some-extra-block">
        Some extra info for some li-item
      </div>
      <div class="details">
        <div class="price">
                  <div class="before-price">Some text</div>
          <div class="item-price">15$</div>
        </div>
        <div class="small-images">
          <div class="small-image">Some image here</div>
          <div class="small-image">Some image here</div>
        </div>
        <div class="see-item">
            <a href="#">click here to see item</a>
        </div>
      </div>
    </div>
  </li>
</ul>

【讨论】：