Question

我必须确保容器的每个部分在所有容器中的高度都相同，并且由于每个容器的内容可以有很大的不同，所以我无法设置硬编码的高度，因为其中一些内部容器只存在一个，而没有被添加为其他。如果仅使用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>

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>

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

1 个答案: