Question

我有这个样本：

代码HTML：

<div class="product-group">
  <div class="product-wrapper">
      <div class="product-img">
          <img src="http://s1.busteco.ro/cristi/rbb/media/catalog/product/cache/3/small_image/210x/9df78eab33525d08d6e5fb8d27136e95/images/catalog/product/placeholder/small_image.jpg" >
      </div>
      <div class="product-details">
           <h3 class="product-name">
                        <a href="http://s1.busteco.ro/cristi/rbb/b2b/better-than-a-tie-bundle.html" title="&quot;Better Than a Tie&quot; Father’s Day Gift Bundle">
                            "Better Than a Tie" Father’s Day Gift Bundle                        </a>
                    </h3>
                    <div class="product-description">
                       <p class="availability">
                            Release date:    
                            07/26/2016                        </p>
                        <a href="http://s1.busteco.ro/cristi/rbb/b2b/better-than-a-tie-bundle.html" class="button view">View product</a>

                    </div>
      </div>

  </div>
  <div class="product-wrapper">
      <div class="product-img">
          <img src="http://s1.busteco.ro/cristi/rbb/media/catalog/product/cache/3/small_image/210x/9df78eab33525d08d6e5fb8d27136e95/images/catalog/product/placeholder/small_image.jpg" >
      </div>
      <div class="product-details">
           <h3 class="product-name">
                        <a href="http://s1.busteco.ro/cristi/rbb/b2b/better-than-a-tie-bundle.html" title="&quot;Better Than a Tie&quot; Father’s Day Gift Bundle">
                            "Better Than a Tie" Father’s Day Gift <br> Bundle"Better Than a Tie" Father’s Day  <br>  Gift Bundle "Better Than a Tie" <br>Father’s Day  Gift Bundle "Better Than a Tie" <br>                       </a>
                    </h3>
                    <div class="product-description">
                       <p class="availability">
                            Release date:    
                            07/26/2016                        </p>
                        <a href="http://s1.busteco.ro/cristi/rbb/b2b/better-than-a-tie-bundle.html" class="button view">View product</a>

                    </div>
      </div>

  </div>
</div>

CODE CSS：

.product-group{
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;    }

.product-wrapper{
    background:#f0f0f0;
    margin:35px 0;
    padding:8px 8px 10px 8px;
    }

    .product-name { margin:0; font-size:1em; font-weight:normal; }

    .product-wrapper .product-details p.availability {
    font-size: 12px;
    text-transform: capitalize;}

查看按钮＆＃34;查看产品＆＃34;，无论内容如何，它都必须始终位于底部。

此时，按钮未按预期对齐。他们的位置是底部：0

如何在不使用position：absolute？

的情况下执行此操作

提前致谢！

Answer 1

您应该能够使用flex达到您想要的效果。这样，同一行上的任何包装器都将具有相同的高度，并且产品链接将全部排列。（在下面的代码段上使用整页链接）

.product-group {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}
.product-wrapper {
  background: #f0f0f0;
  margin: 35px 0;
  padding: 8px 8px 10px 8px;
  display: flex;             /* make each wrapper flex*/
  flex-direction: column;    /* stack inner elements into a column */
}
.product-name {
  margin: 0;
  font-size: 1em;
  font-weight: normal;
}
.product-wrapper .product-details p.availability {
  font-size: 12px;
  text-transform: capitalize;
  /* make this take the empty space and push the link to the bottom */
  flex-grow: 1;
}
.product-description,
.product-details {
  /* make these flex and stretch to fit their parents remaining space */
  flex-direction: column;
  display: flex;
  flex-grow: 1;
}

<div class="product-group">
  <div class="product-wrapper">
    <div class="product-img">
      <img src="http://s1.busteco.ro/cristi/rbb/media/catalog/product/cache/3/small_image/210x/9df78eab33525d08d6e5fb8d27136e95/images/catalog/product/placeholder/small_image.jpg">
    </div>
    <div class="product-details">
      <h3 class="product-name"><a href="http://s1.busteco.ro/cristi/rbb/b2b/better-than-a-tie-bundle.html" title="&quot;Better Than a Tie&quot; Father’s Day Gift Bundle">"Better Than a Tie" Father’s Day Gift Bundle</a></h3>
      <div class="product-description">
        <p class="availability">
          Release date: 07/26/2016</p>
        <a href="http://s1.busteco.ro/cristi/rbb/b2b/better-than-a-tie-bundle.html" class="button view">View product</a>
      </div>
    </div>
  </div>
  <div class="product-wrapper">
    <div class="product-img">
      <img src="http://s1.busteco.ro/cristi/rbb/media/catalog/product/cache/3/small_image/210x/9df78eab33525d08d6e5fb8d27136e95/images/catalog/product/placeholder/small_image.jpg">
    </div>
    <div class="product-details">
      <h3 class="product-name"><a href="http://s1.busteco.ro/cristi/rbb/b2b/better-than-a-tie-bundle.html" title="&quot;Better Than a Tie&quot; Father’s Day Gift Bundle">"Better Than a Tie" Father’s Day Gift <br> Bundle"Better Than a Tie" Father’s Day  <br>  Gift Bundle "Better Than a Tie" <br>Father’s Day  Gift Bundle "Better Than a Tie" <br> </a></h3>
      <div class="product-description">
        <p class="availability">
          Release date: 07/26/2016</p>
        <a href="http://s1.busteco.ro/cristi/rbb/b2b/better-than-a-tie-bundle.html" class="button view">View product</a>

      </div>
    </div>

  </div>
</div>

在底部对齐按钮而不使用位置：绝对

1 个答案: