文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >网格内较短的div以填充剩余的垂直空间+将列表元素对齐到底部

问网格内较短的div以填充剩余的垂直空间+将列表元素对齐到底部
EN

Stack Overflow用户
提问于 2018-04-03 22:05:40
回答 1查看 33关注 0票数 0

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

这很好，但我需要将每个项目的最后一个子项与它的父项的底部对齐。最后一个孩子是一个按钮，所以如果他们都排队的话，看起来会更好看。

我的问题是，我有相当多的div围绕内容，我不想增加所有的柔印盒-我假设这不应该是必要的，但我不是专家。

最高层的父母都是一样高的。下一个孩子不是，但我想我已经通过设置height: 100%解决了这个问题。因此，下一个问题是如何让mosaic__caption填充空间，并将.btn填充到底部。

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

第一项是我增加了更多的文字，以使它更高，我增加了不透明的红色背景到父母的div，所以我们可以看到什么是100%，什么不是。

有什么想法吗？

​

代码语言：javascript
复制
/**
 * 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;
}
代码语言：javascript
复制
<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>

​

html
css
flexbox
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-04-03 23:04:41

您可以制作.mosaic__wrap和.mosaic__caption柔性盒。若要维护内容的垂直流，请将flex-direction: column添加到两者中。

然后，为了使.mosaic__wrap展开以填充垂直高度，添加flex: 1。

​

代码语言：javascript
复制
/**
 * 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;
}
代码语言：javascript
复制
<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
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/49639818

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档