网格中的较短div用于填充剩余的垂直空间+将列表元素对齐到底部

时间：2018-04-03 22:05:40

标签： html css flexbox

我有一个用于显示产品的网格。一些标题和描述会比其他标题和描述更长，所以我需要保持所有div的高度相同，以保持一致的样式。我使用display: flex完成了这项工作。

这很有效但我需要将每个项目的最后一个孩子对齐到它的父母的底部。最后一个孩子是一个按钮，如果它们全部排成一列会更好看。

我遇到的问题是我对内容有很多div，我不想在所有这些内容中添加flexbox - 我认为这不应该是必要的，但我不是专家。

最高级别的父母都是相同的高度。下一个孩子不是，但我想我已设法通过设置height: 100%来解决这个问题。因此，下一个问题是让mosaic__caption填充空间，并将.btn添加到底部。

这是我的CodePen：https://codepen.io/moy/pen/JLBOyE

第一项是我添加了更多文字以使其更高的项目我已经为父母div添加了不透明的红色背景，因此我们可以看到什么是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>

1 个答案:

答案 0 :(得分：1)

您可以制作.mosaic__wrap和.mosaic__caption个柔版箱。要保持内容的垂直流，请向两者添加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>

相关问题
最新问题