在网格中较短的div，以填充剩余的垂直空间 对齐列表元素到底部

Question

我有一个网格，该网格将用于显示产品。某些标题和描述将比其他标题和描述更长，因此我需要将所有Div保持相同的高度以保持一致的样式。我已经使用display: flex完成了此操作。

效果很好，但是我需要将每个项目的最后一个孩子与父母的底部保持一致。最后一个孩子是一个按钮，所以如果他们全部排队，看起来会更好。

我遇到的问题是我周围有很多divs，我不想在所有这些内容中添加Flexbox-我认为这不是必需的，但我不是专家。

最高水平的父母都是相同的高度。下一个孩子不是，但我认为我设法通过设置height: 100%解决了这一点。因此，下一个问题是让mosaic__caption填充空间，然后将.btn填充到底部。

这是我的Codepen：https：//codepen.io/moy/pen/jlboye

第一个项目是我添加了更多文本以使其更高的文本，并且我在父母divs中添加了不透明的红色背景，因此我们可以看到什么是100％，什么不是。

有什么想法？

/**
 * Clearfix
 */
/**
 * Typography
 */
/**
 * Media Queries.
 * 
 * 1. $bp2  =  480px 	(30rem)
 * 2. $bp3  =  600px 	(37.5rem)
 * 3. $bp4  =  768px 	(48rem)
 * 4. $bp5  =  1024px 	(64rem)
 * 5. $bp6  =  1220px 	(76.250rem)
 * 6. $bp7  =  1400px 	(87.5rem)
 */
/**
 * Base
 */
/**
 * Colours
 */
/**
 * Spacing
 */
.mosaic {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  list-style: none;
  margin: 0 0 30px -15px;
  padding: 0;
  /* [1] */
  /* [2] */
  /* [3] */
  /* [4] */
  /* [5] */
  /* [6] */
}
.mosaic:before, .mosaic:after {
  content: "";
  display: table;
}
.mosaic:after {
  clear: both;
}
.mosaic:before, .mosaic:after {
  content: normal;
  /* [1] */
}
@media (min-width: 48em) {
  .mosaic {
    margin-left: -30px;
  }
}
.mosaic__item {
  background: none;
  background: rgba(255, 0, 0, 0.1);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: block;
  margin-bottom: 0;
  padding-left: -15px;
  position: relative;
  width: 50%;
  /* [1] */
  /* [2] */
  /* [3] */
  /* [4] */
  /* [5] */
  /* [6] */
  /* [1] */
  /* [2] */
  /* [3] */
  /* [4] */
  /* [5] */
  /* [6] */
}
@media (min-width: 48em) {
  .mosaic__item {
    float: left;
    padding-left: 30px;
    width: 50%;
  }
  .mosaic__item:nth-child(odd) {
    clear: left;
  }
}
@media (min-width: 87.5em) {
  .mosaic__item {
    width: 33.33333%;
  }
  .mosaic__item:nth-child(odd) {
    clear: none;
  }
  .mosaic__item:nth-child(3n+1) {
    clear: left;
  }
}
.mosaic__wrap {
  background: rgba(255, 0, 0, 0.1);
  height: 100%;
  position: relative;
}
.mosaic__link {
  background: white;
  border-bottom: none;
  display: block;
  font-weight: 400;
  height: 100%;
  padding: 0;
  -webkit-transition: all .25s;
  transition: all .25s;
  text-shadow: none;
}
.mosaic__link:hover {
  background-color: #94121f;
}
.mosaic__image-wrap {
  background-image: none;
  display: block;
  overflow: hidden;
  padding: 0;
  text-shadow: none;
}
.mosaic__image {
  display: block;
  -webkit-transition: all .25s ease-out;
  transition: all .25s ease-out;
  width: 100%;
  max-width: 100%;
  -webkit-backface-visibility: hidden;
}
.mosaic__item:hover .mosaic__image {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}
.mosaic__caption {
  background: rgba(255, 0, 0, 0.1);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #778586;
  display: block;
  overflow: hidden;
  padding: 15px 15px;
  text-align: center;
  -webkit-transition: all .25s;
  transition: all .25s;
  /* [1] */
  /* [2] */
  /* [3] */
  /* [4] */
  /* [5] */
  /* [6] */
}
.mosaic__link:hover .mosaic__caption {
  color: #fbdde0;
}
@media (min-width: 48em) {
  .mosaic__caption {
    padding: 30px 30px;
  }
}
.mosaic__caption .btn {
  margin-top: auto;
}
.mosaic__title {
  color: #0e1010;
  font-size: 15px;
  font-size: 1.5rem;
  margin-bottom: 7.5px;
  -webkit-transition: all .20s;
  transition: all .20s;
  /* [1] */
  /* [2] */
  /* [3] */
  /* [4] */
  /* [5] */
  /* [6] */
}
.h-product .mosaic__title {
  margin-bottom: 0;
}
.mosaic__title a {
  background-image: none;
  font-weight: 700;
  text-shadow: none;
}
@media (min-width: 37.5em) {
  .mosaic__title {
    font-size: 20px;
    font-size: 2rem;
  }
}
.mosaic__link:hover .mosaic__title {
  color: white;
}
.mosaic__desc {
  margin-bottom: 7.5px;
}
.mosaic__value {
  margin-bottom: 15px;
}
.mosaic__value .p-price {
  color: #0e1010;
  font-weight: 700;
  margin-left: 5px;
}
.mosaic__review {
  margin-bottom: 0;
}

<ul class="mosaic h-feed">
	<li class="mosaic__item h-product">
		<div class="mosaic__wrap">
			<a href="#" class="mosaic__image-wrap">
				<img src="http://via.placeholder.com/350x150" class="mosaic__image u-photo" alt="ALT TEXT" />
			</a>
			<div class="mosaic__caption">
				<a href="#" class="flag p-category">Special Offer</a>
				<h2 class="mosaic__title p-name"><a href="#" class="moasic__title-link">Name of Product that is really, really, really long</a></h2>
				<p class="mosaic__desc e-description">A long description to add more height to product</p>
				<div class="h-review mosaic__review">
					<data class="p-rating" value="3">
			            3 Star rating here
					</data>
	            </div>
				<p class="mosaic__value"><del>£4.95</del> <data class="p-price" value="4.05">£4.05</data></p>
				<a href="#" class="btn">Add to Cart</a>
			</div>
		</div>
	</li>
	<li class="mosaic__item h-product">
		<div class="mosaic__wrap">
			<a href="#" class="mosaic__image-wrap">
				<img src="http://via.placeholder.com/350x150" class="mosaic__image u-photo" alt="ALT TEXT" />
			</a>
			<div class="mosaic__caption">
				<a href="#" class="flag p-category">Special Offer</a>
				<h2 class="mosaic__title p-name"><a href="#" class="moasic__title-link">Name of Product</a></h2>
				<p class="mosaic__desc e-description">A short description</p>
				<div class="h-review mosaic__review">
					<data class="p-rating" value="3">
			            3 Star rating here
					</data>
	            </div>
				<p class="mosaic__value"><del>£4.95</del> <data class="p-price" value="4.05">£4.05</data></p>
				<a href="#" class="btn">Add to Cart</a>
			</div>
		</div>
	</li>
	<li class="mosaic__item h-product">
		<div class="mosaic__wrap">
			<a href="#" class="mosaic__image-wrap">
				<img src="http://via.placeholder.com/350x150" class="mosaic__image u-photo" alt="ALT TEXT" />
			</a>
			<div class="mosaic__caption">
				<a href="#" class="flag p-category">Special Offer</a>
				<h2 class="mosaic__title p-name"><a href="#" class="moasic__title-link">Name of Product</a></h2>
				<p class="mosaic__desc e-description">A short description</p>
				<div class="h-review mosaic__review">
					<data class="p-rating" value="3">
			            3 Star rating here
					</data>
	            </div>
				<p class="mosaic__value"><del>£4.95</del> <data class="p-price" value="4.05">£4.05</data></p>
				<a href="#" class="btn">Add to Cart</a>
			</div>
		</div>
	</li>
	<li class="mosaic__item h-product">
		<div class="mosaic__wrap">
			<a href="#" class="mosaic__image-wrap">
				<img src="http://via.placeholder.com/350x150" class="mosaic__image u-photo" alt="ALT TEXT" />
			</a>
			<div class="mosaic__caption">
				<a href="#" class="flag p-category">Special Offer</a>
				<h2 class="mosaic__title p-name"><a href="#" class="moasic__title-link">Name of Product</a></h2>
				<p class="mosaic__desc e-description">A short description</p>
				<div class="h-review mosaic__review">
					<data class="p-rating" value="3">
			            3 Star rating here
					</data>
	            </div>
				<p class="mosaic__value"><del>£4.95</del> <data class="p-price" value="4.05">£4.05</data></p>
				<a href="#" class="btn">Add to Cart</a>
			</div>
		</div>
	</li>
	<li class="mosaic__item h-product">
		<div class="mosaic__wrap">
			<a href="#" class="mosaic__image-wrap">
				<img src="http://via.placeholder.com/350x150" class="mosaic__image u-photo" alt="ALT TEXT" />
			</a>
			<div class="mosaic__caption">
				<a href="#" class="flag p-category">Special Offer</a>
				<h2 class="mosaic__title p-name"><a href="#" class="moasic__title-link">Name of Product</a></h2>
				<p class="mosaic__desc e-description">A short description</p>
				<div class="h-review mosaic__review">
					<data class="p-rating" value="3">
			            3 Star rating here
					</data>
	            </div>
				<p class="mosaic__value"><del>£4.95</del> <data class="p-price" value="4.05">£4.05</data></p>
				<a href="#" class="btn">Add to Cart</a>
			</div>
		</div>
	</li>
</ul>

Answer 1

您可以制作.mosaic__wrap和.mosaic__caption Flexbox。为了保持内容的垂直流，将flex-direction: column添加到两者中。

然后，要使.mosaic__wrap扩展以填充垂直高度，请添加flex: 1。

/**
 * Clearfix
 */
/**
 * Typography
 */
/**
 * Media Queries.
 * 
 * 1. $bp2  =  480px 	(30rem)
 * 2. $bp3  =  600px 	(37.5rem)
 * 3. $bp4  =  768px 	(48rem)
 * 4. $bp5  =  1024px 	(64rem)
 * 5. $bp6  =  1220px 	(76.250rem)
 * 6. $bp7  =  1400px 	(87.5rem)
 */
/**
 * Base
 */
/**
 * Colours
 */
/**
 * Spacing
 */
.mosaic {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style: none;
  margin: 0 0 30px -15px;
  padding: 0;
  /* [1] */
  /* [2] */
  /* [3] */
  /* [4] */
  /* [5] */
  /* [6] */
}
.mosaic:before,
.mosaic:after {
  content: "";
  display: table;
}
.mosaic:after {
  clear: both;
}
.mosaic:before,
.mosaic:after {
  content: normal;
  /* [1] */
}
@media (min-width: 48em) {
  .mosaic {
    margin-left: -30px;
  }
}
.mosaic__item {
  background: none;
  background: rgba(255, 0, 0, 0.1);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  margin-bottom: 0;
  padding-left: -15px;
  position: relative;
  width: 50%;
  /* [1] */
  /* [2] */
  /* [3] */
  /* [4] */
  /* [5] */
  /* [6] */
  /* [1] */
  /* [2] */
  /* [3] */
  /* [4] */
  /* [5] */
  /* [6] */
}
@media (min-width: 48em) {
  .mosaic__item {
    float: left;
    padding-left: 30px;
    width: 50%;
  }
  .mosaic__item:nth-child(odd) {
    clear: left;
  }
}
@media (min-width: 87.5em) {
  .mosaic__item {
    width: 33.33333%;
  }
  .mosaic__item:nth-child(odd) {
    clear: none;
  }
  .mosaic__item:nth-child(3n+1) {
    clear: left;
  }
}
.mosaic__wrap {
  background: rgba(255, 0, 0, 0.1);
  height: 100%;
  position: relative;
}
.mosaic__link {
  background: white;
  border-bottom: none;
  display: block;
  font-weight: 400;
  height: 100%;
  padding: 0;
  -webkit-transition: all .25s;
  transition: all .25s;
  text-shadow: none;
}
.mosaic__link:hover {
  background-color: #94121f;
}
.mosaic__image-wrap {
  background-image: none;
  display: block;
  overflow: hidden;
  padding: 0;
  text-shadow: none;
}
.mosaic__image {
  display: block;
  -webkit-transition: all .25s ease-out;
  transition: all .25s ease-out;
  width: 100%;
  max-width: 100%;
  -webkit-backface-visibility: hidden;
}
.mosaic__item:hover .mosaic__image {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}
.mosaic__caption {
  background: rgba(255, 0, 0, 0.1);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #778586;
  display: block;
  overflow: hidden;
  padding: 15px 15px;
  text-align: center;
  -webkit-transition: all .25s;
  transition: all .25s;
  /* [1] */
  /* [2] */
  /* [3] */
  /* [4] */
  /* [5] */
  /* [6] */
}
.mosaic__link:hover .mosaic__caption {
  color: #fbdde0;
}
@media (min-width: 48em) {
  .mosaic__caption {
    padding: 30px 30px;
  }
}
.mosaic__caption .btn {
  margin-top: auto;
}
.mosaic__title {
  color: #0e1010;
  font-size: 15px;
  font-size: 1.5rem;
  margin-bottom: 7.5px;
  -webkit-transition: all .20s;
  transition: all .20s;
  /* [1] */
  /* [2] */
  /* [3] */
  /* [4] */
  /* [5] */
  /* [6] */
}
.h-product .mosaic__title {
  margin-bottom: 0;
}
.mosaic__title a {
  background-image: none;
  font-weight: 700;
  text-shadow: none;
}
@media (min-width: 37.5em) {
  .mosaic__title {
    font-size: 20px;
    font-size: 2rem;
  }
}
.mosaic__link:hover .mosaic__title {
  color: white;
}
.mosaic__desc {
  margin-bottom: 7.5px;
}
.mosaic__value {
  margin-bottom: 15px;
}
.mosaic__value .p-price {
  color: #0e1010;
  font-weight: 700;
  margin-left: 5px;
}
.mosaic__review {
  margin-bottom: 0;
}
/* added styles */
.mosaic__wrap,
.mosaic__caption {
  display: flex;
  flex-direction: column;
}
.mosaic__caption {
  flex: 1;
}

<ul class="mosaic h-feed">
  <li class="mosaic__item h-product">
    <div class="mosaic__wrap">
      <a href="#" class="mosaic__image-wrap">
        <img src="http://via.placeholder.com/350x150" class="mosaic__image u-photo" alt="ALT TEXT" />
      </a>
      <div class="mosaic__caption">
        <a href="#" class="flag p-category">Special Offer</a>
        <h2 class="mosaic__title p-name"><a href="#" class="moasic__title-link">Name of Product that is really, really, really long</a></h2>
        <p class="mosaic__desc e-description">A long description to add more height to product</p>
        <div class="h-review mosaic__review">
          <data class="p-rating" value="3">
			            3 Star rating here
					</data>
        </div>
        <p class="mosaic__value"><del>£4.95</del> <data class="p-price" value="4.05">£4.05</data></p>
        <a href="#" class="btn">Add to Cart</a>
      </div>
    </div>
  </li>
  <li class="mosaic__item h-product">
    <div class="mosaic__wrap">
      <a href="#" class="mosaic__image-wrap">
        <img src="http://via.placeholder.com/350x150" class="mosaic__image u-photo" alt="ALT TEXT" />
      </a>
      <div class="mosaic__caption">
        <a href="#" class="flag p-category">Special Offer</a>
        <h2 class="mosaic__title p-name"><a href="#" class="moasic__title-link">Name of Product</a></h2>
        <p class="mosaic__desc e-description">A short description</p>
        <div class="h-review mosaic__review">
          <data class="p-rating" value="3">
			            3 Star rating here
					</data>
        </div>
        <p class="mosaic__value"><del>£4.95</del> <data class="p-price" value="4.05">£4.05</data></p>
        <a href="#" class="btn">Add to Cart</a>
      </div>
    </div>
  </li>
  <li class="mosaic__item h-product">
    <div class="mosaic__wrap">
      <a href="#" class="mosaic__image-wrap">
        <img src="http://via.placeholder.com/350x150" class="mosaic__image u-photo" alt="ALT TEXT" />
      </a>
      <div class="mosaic__caption">
        <a href="#" class="flag p-category">Special Offer</a>
        <h2 class="mosaic__title p-name"><a href="#" class="moasic__title-link">Name of Product</a></h2>
        <p class="mosaic__desc e-description">A short description</p>
        <div class="h-review mosaic__review">
          <data class="p-rating" value="3">
			            3 Star rating here
					</data>
        </div>
        <p class="mosaic__value"><del>£4.95</del> <data class="p-price" value="4.05">£4.05</data></p>
        <a href="#" class="btn">Add to Cart</a>
      </div>
    </div>
  </li>
  <li class="mosaic__item h-product">
    <div class="mosaic__wrap">
      <a href="#" class="mosaic__image-wrap">
        <img src="http://via.placeholder.com/350x150" class="mosaic__image u-photo" alt="ALT TEXT" />
      </a>
      <div class="mosaic__caption">
        <a href="#" class="flag p-category">Special Offer</a>
        <h2 class="mosaic__title p-name"><a href="#" class="moasic__title-link">Name of Product</a></h2>
        <p class="mosaic__desc e-description">A short description</p>
        <div class="h-review mosaic__review">
          <data class="p-rating" value="3">
			            3 Star rating here
					</data>
        </div>
        <p class="mosaic__value"><del>£4.95</del> <data class="p-price" value="4.05">£4.05</data></p>
        <a href="#" class="btn">Add to Cart</a>
      </div>
    </div>
  </li>
  <li class="mosaic__item h-product">
    <div class="mosaic__wrap">
      <a href="#" class="mosaic__image-wrap">
        <img src="http://via.placeholder.com/350x150" class="mosaic__image u-photo" alt="ALT TEXT" />
      </a>
      <div class="mosaic__caption">
        <a href="#" class="flag p-category">Special Offer</a>
        <h2 class="mosaic__title p-name"><a href="#" class="moasic__title-link">Name of Product</a></h2>
        <p class="mosaic__desc e-description">A short description</p>
        <div class="h-review mosaic__review">
          <data class="p-rating" value="3">
			            3 Star rating here
					</data>
        </div>
        <p class="mosaic__value"><del>£4.95</del> <data class="p-price" value="4.05">£4.05</data></p>
        <a href="#" class="btn">Add to Cart</a>
      </div>
    </div>
  </li>
</ul>