使用flexbox獲取所有元素相同的高度

Question

我必須使容器的每個部分在所有容器中都是相同的高度，並且由於每個容器的內容可能變化很大，我只是不能設置硬編碼高度，因為這些內部容器中的一些存在於一個但是沒有添加其他。 有興趣，如果只使用CSS，沒有javascript可以實現這一點

到目前為止，我已經嘗試過使用flexbox，但不確定我做錯了什么，因為它對我來說真的不起作用，而且每個容器根據最長的容器沒有采取相同的高度。

基本上，我必須做的事情 - 將每個容器匹配到相同的高度。 如果一個文本不存在於一個但存在於其他需要添加空白空間在圖片中，它是這樣的 -

目前我有 -

預期（通知空白區域） -

我用HTML結構的小提琴代碼 - 小提琴代碼

也許需要更改一些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>

Answer 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>