【问题标题】:Align three divs at the bottom of flexbox在 flexbox 底部对齐三个 div
【发布时间】:2019-08-26 00:15:03
【问题描述】:

这是基本的 css,但我就是做不好。

我正在建立一个电子商务网站,所以我需要很多弹性框来展示产品。我也在我的项目中使用引导程序。 这是我的代码:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row" style="display: flex; flex-wrap: wrap;">
  <div class="col-sm-6 col-md-3" style="cursor:pointer; transition: border .2s ease-in-out; margin:15px; border: 1px solid #ddd; border-radius: 4px; height:auto; box-shadow: 0 2px 3px rgba(0,0,0,.075);">
    <img style="vertical-align: middle;" class="img-responsive" src="https://i.dell.com/das/xa.ashx/global-site-design%20web/00000000-0000-0000-0000-000000000000/1/LargePNG?id=Dell/Product_Images/Dell_Client_Products/Notebooks/Latitude_Notebooks/12_7275/global_spi/notebook-latitude-12-7275-black-left-windows-hero-504x350.psd"
      alt="...">
    <div>
      <h4 style="overflow-wrap: break-word; word-wrap: break-word;" class="text-center">Laptop Dell XPS 9250 12.5" (m56Y57/8GB/256GB/ HD)</h4>
    </div>
    <div class="text-center" style="margin-top:auto;">
      <span style="color:yellow;background-color:red;font-size:18px;">-67% OFF NOW!</span>
    </div>
    <div>
      <h5 class="text-center" style="margin-right:5px; font-size:18px;"><span style="text-decoration: line-through; color:black; font-size:22px;"><span style="color:red; font-size:20px">$2499.99</span></span> $1499.99</h5>
    </div>
    <div class="text-center" style="margin-top:auto;">
      <button class="btn btn-success add_to_cart" style="margin-bottom:5px;">Add to cart</button>
    </div>
  </div>

  <div class="col-sm-6 col-md-3" style="cursor:pointer; transition: border .2s ease-in-out; margin:15px; border: 1px solid #ddd; border-radius: 4px; height:auto; box-shadow: 0 2px 3px rgba(0,0,0,.075);">
    <img style="vertical-align: middle;" class="img-responsive" src="https://external.webstorage.gr/Product-Images/1312102/quest-slimbook-convertible-1000-1312102.jpg" alt="...">
    <div>
      <h4 style="overflow-wrap: break-word; word-wrap: break-word;" class="text-center">Laptop Quest Slimbook 360 Convertible - 13.3" (Celeron N3350/4GB/32GB/HD)</h4>
    </div>
    <div class="text-center" style="margin-top:auto;">
      <span style="color:yellow;background-color:red;font-size:18px;">-40% OFF NOW!</span>
    </div>
    <div>
      <h5 class="text-center" style="margin-right:5px; font-size:18px;"><span style="text-decoration: line-through; color:black; font-size:22px;"><span style="color:red; font-size:20px">$349</span></span> $249</h5>
    </div>
    <div class="text-center">
      <button class="btn btn-success add_to_cart" style="margin-bottom:5px;">Add to cart</button>
    </div>
  </div>
</div>

这就是它的样子:

我希望第一个弹性框中的“-67% 折扣”及其下方的所有元素与第二个弹性框中的相同元素高度匹配。如您所见,我已经在包含优惠的 div 中使用style="margin-top:auto;"(现在享受 67% 优惠和现在享受 40% 优惠),但它并没有在底部对齐。 p>

这就是我想要的样子:

更重要的是,当在移动设备中查看此代码或通过缩小浏览器窗口时,三个 div 在底部成功对齐。 我错过了什么?

【问题讨论】:

    标签: html css twitter-bootstrap flexbox


    【解决方案1】:

    有两种方法可以解决。

    1. 一般方式

      使用min-height 将图像产品和标题包装在包装器中。显然,min-height 对于最高的人来说应该足够了。

    2. 具体方式

      这通常更好,因为不是硬编码页面上所有产品的min-width,它只是让它们调整到行中最高的高度。您仍然需要对图片和产品标题进行包装,但您提供的不是 min-height,而是整个产品

    display:flex;
    flex-direction: column;
    

    ...并给出上述包装器flex-grow: 1。这将使该行中的所有产品增长到与最高的匹配,并将额外的高度分配给具有flex-grow: 1(这是您的包装器)的唯一子元素。

    工作示例:

    .products {
      display: flex; 
      flex-wrap: wrap;
    }
    .product {
      cursor:pointer; 
      transition: border .2s ease-in-out; 
      margin:15px; 
      border: 1px solid #ddd; 
      border-radius: 4px; 
      height:auto; 
      box-shadow: 0 2px 3px rgba(0,0,0,.075);
    }
    .product img {
      vertical-align: middle;
      width: 100%;
      height: auto;
    }
    .product h4 {
      overflow-wrap: break-word; 
      word-wrap: break-word;
    }
    .product h5 {
      margin-right:5px; 
      font-size:18px;
    }
    .add_to_cart {
      margin-bottom:5px;
    }
    
    /* here's the magic */
    
    .product {
      display: flex;
      flex-direction: column;
    }
    .product-body {
      flex-grow: 1;
    }
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="container">
      <div class="row products">
        <div class="col-sm-6 col-md-3 product">
          <div class="product-body">
            <img style="" class="img-responsive" src="https://i.dell.com/das/xa.ashx/global-site-design%20web/00000000-0000-0000-0000-000000000000/1/LargePNG?id=Dell/Product_Images/Dell_Client_Products/Notebooks/Latitude_Notebooks/12_7275/global_spi/notebook-latitude-12-7275-black-left-windows-hero-504x350.psd"
              alt="...">
            <div>
              <h4 class="text-center">Laptop Dell XPS 9250 12.5" (m56Y57/8GB/256GB/ HD)</h4>
            </div>
          </div>
          <div class="text-center" style="margin-top:auto;">
            <span style="color:yellow;background-color:red;font-size:18px;">-67% OFF NOW!</span>
          </div>
          <div>
            <h5 class="text-center">
              <span style="text-decoration: line-through; color:black; font-size:22px;">
                <span style="color:red; font-size:20px">$2499.99</span>
              </span>
              $1499.99
            </h5>
          </div>
          <div class="text-center" style="margin-top:auto;">
            <button class="btn btn-success add_to_cart">Add to cart</button>
          </div>
        </div>
    
        <div class="col-sm-6 col-md-3 product">
          <div class="product-body">
            <img class="img-responsive" src="https://external.webstorage.gr/Product-Images/1312102/quest-slimbook-convertible-1000-1312102.jpg" alt="...">
            <div>
              <h4 class="text-center">Laptop Quest Slimbook 360 Convertible - 13.3" (Celeron N3350/4GB/32GB/HD)</h4>
            </div>
          </div>
          <div class="text-center" style="margin-top:auto;">
            <span style="color:yellow;background-color:red;font-size:18px;">-40% OFF NOW!</span>
          </div>
          <div>
            <h5 class="text-center">
              <span style="text-decoration: line-through; color:black; font-size:22px;">
                <span style="color:red; font-size:20px">$349</span>
              </span>
              $249
            </h5>
          </div>
          <div class="text-center">
            <button class="btn btn-success add_to_cart">Add to cart</button>
          </div>
        </div>
      </div>
    </div>

    【讨论】:

      【解决方案2】:

      你也可以让每个盒子成为一个弹性容器,然后将margin:auto 移除到按钮上,如果价格必须包含在 2 行上,你可以在 h5 中添加一个最小高度。

      img {max-width:100%;}/* avoids image stretching*/
      h5.text-center {min-height:2.8em;}/* about 2 line height */
      <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
      <div class="container">
        <div class="row flex-wrap" style>
        <div class="col-sm-6 col-md-3 d-flex flex-column" style="cursor:pointer; transition: border .2s ease-in-out; margin:15px; border: 1px solid #ddd; border-radius: 4px; height:auto; box-shadow: 0 2px 3px rgba(0,0,0,.075);">
          <img style="vertical-align: middle;" class="img-responsive" src="https://i.dell.com/das/xa.ashx/global-site-design%20web/00000000-0000-0000-0000-000000000000/1/LargePNG?id=Dell/Product_Images/Dell_Client_Products/Notebooks/Latitude_Notebooks/12_7275/global_spi/notebook-latitude-12-7275-black-left-windows-hero-504x350.psd"
            alt="...">
          <div>
            <h4 style="overflow-wrap: break-word; word-wrap: break-word;" class="text-center">Laptop Dell XPS 9250 12.5" (m56Y57/8GB/256GB/ HD)</h4>
          </div>
          <div class="text-center" style="margin-top:auto;">
            <span style="color:yellow;background-color:red;font-size:18px;">-67% OFF NOW!</span>
          </div>
          <div>
            <h5 class="text-center" style="margin-right:5px; font-size:18px;"><span style="text-decoration: line-through; color:black; font-size:22px;"><span style="color:red; font-size:20px">$2499.99</span></span> $1499.99</h5>
          </div>
          <div class="text-center" style="">
            <button class="btn btn-success add_to_cart" style="margin-bottom:5px;">Add to cart</button>
          </div>
        </div>
      
        <div class="col-sm-6 col-md-3  d-flex flex-column" style="cursor:pointer; transition: border .2s ease-in-out; margin:15px; border: 1px solid #ddd; border-radius: 4px; height:auto; box-shadow: 0 2px 3px rgba(0,0,0,.075);">
          <img style="vertical-align: middle;" class="img-responsive" src="https://external.webstorage.gr/Product-Images/1312102/quest-slimbook-convertible-1000-1312102.jpg" alt="...">
          <div>
            <h4 style="overflow-wrap: break-word; word-wrap: break-word;" class="text-center">Laptop Quest Slimbook 360 Convertible - 13.3" (Celeron N3350/4GB/32GB/HD)</h4>
          </div>
          <div class="text-center" style="margin-top:auto;">
            <span style="color:yellow;background-color:red;font-size:18px;">-40% OFF NOW!</span>
          </div>
          <div>
            <h5 class="text-center" style="margin-right:5px; font-size:18px;"><span style="text-decoration: line-through; color:black; font-size:22px;"><span style="color:red; font-size:20px">$349</span></span> $249</h5>
          </div>
          <div class="text-center">
            <button class="btn btn-success add_to_cart" style="margin-bottom:5px;">Add to cart</button>
          </div>
        </div>  <div class="col-sm-6 col-md-3 d-flex flex-column" style="cursor:pointer; transition: border .2s ease-in-out; margin:15px; border: 1px solid #ddd; border-radius: 4px; height:auto; box-shadow: 0 2px 3px rgba(0,0,0,.075);">
          <img style="vertical-align: middle;" class="img-responsive" src="https://i.dell.com/das/xa.ashx/global-site-design%20web/00000000-0000-0000-0000-000000000000/1/LargePNG?id=Dell/Product_Images/Dell_Client_Products/Notebooks/Latitude_Notebooks/12_7275/global_spi/notebook-latitude-12-7275-black-left-windows-hero-504x350.psd"
            alt="...">
          <div>
            <h4 style="overflow-wrap: break-word; word-wrap: break-word;flex:1;" class="text-center">Laptop Dell XPS 9250 12.5" (m56Y57/8GB/256GB/ HD)</h4>
          </div>
          <div class="text-center" style="margin-top:auto;">
            <span style="color:yellow;background-color:red;font-size:18px;">-67% OFF NOW!</span>
          </div>
          <div>
            <h5 class="text-center" style="margin-right:5px; font-size:18px;"><span style="text-decoration: line-through; color:black; font-size:22px;"><span style="color:red; font-size:20px">$2499.99</span></span> $1499.99</h5>
          </div>
          <div class="text-center" style="">
            <button class="btn btn-success add_to_cart" style="margin-bottom:5px;">Add to cart</button>
          </div>
        </div>
      
        <div class="col-sm-6 col-md-3  d-flex flex-column" style="cursor:pointer; transition: border .2s ease-in-out; margin:15px; border: 1px solid #ddd; border-radius: 4px; height:auto; box-shadow: 0 2px 3px rgba(0,0,0,.075);">
          <img style="vertical-align: middle;" class="img-responsive" src="https://external.webstorage.gr/Product-Images/1312102/quest-slimbook-convertible-1000-1312102.jpg" alt="...">
          <div>
            <h4 style="overflow-wrap: break-word; word-wrap: break-word;" class="text-center">Laptop Quest Slimbook 360 Convertible - 13.3" (Celeron N3350/4GB/32GB/HD)</h4>
          </div>
          <div class="text-center" style="margin-top:auto;">
            <span style="color:yellow;background-color:red;font-size:18px;">-40% OFF NOW!</span>
          </div>
          <div>
            <h5 class="text-center" style="margin-right:5px; font-size:18px;"><span style="text-decoration: line-through; color:black; font-size:22px;"><span style="color:red; font-size:20px">$349</span></span> $249</h5>
          </div>
          <div class="text-center">
            <button class="btn btn-success add_to_cart" style="margin-bottom:5px;">Add to cart</button>
          </div>
        </div>  <div class="col-sm-6 col-md-3 d-flex flex-column" style="cursor:pointer; transition: border .2s ease-in-out; margin:15px; border: 1px solid #ddd; border-radius: 4px; height:auto; box-shadow: 0 2px 3px rgba(0,0,0,.075);">
          <img style="vertical-align: middle;" class="img-responsive" src="https://i.dell.com/das/xa.ashx/global-site-design%20web/00000000-0000-0000-0000-000000000000/1/LargePNG?id=Dell/Product_Images/Dell_Client_Products/Notebooks/Latitude_Notebooks/12_7275/global_spi/notebook-latitude-12-7275-black-left-windows-hero-504x350.psd"
            alt="...">
          <div>
            <h4 style="overflow-wrap: break-word; word-wrap: break-word;flex:1;" class="text-center">Laptop Dell XPS 9250 12.5" (m56Y57/8GB/256GB/ HD)</h4>
          </div>
          <div class="text-center" style="margin-top:auto;">
            <span style="color:yellow;background-color:red;font-size:18px;">-67% OFF NOW!</span>
          </div>
          <div>
            <h5 class="text-center" style="margin-right:5px; font-size:18px;"><span style="text-decoration: line-through; color:black; font-size:22px;"><span style="color:red; font-size:20px">$2499.99</span></span> $1499.99</h5>
          </div>
          <div class="text-center" style="">
            <button class="btn btn-success add_to_cart" style="margin-bottom:5px;">Add to cart</button>
          </div>
        </div>
      
        <div class="col-sm-6 col-md-3  d-flex flex-column" style="cursor:pointer; transition: border .2s ease-in-out; margin:15px; border: 1px solid #ddd; border-radius: 4px; height:auto; box-shadow: 0 2px 3px rgba(0,0,0,.075);">
          <img style="vertical-align: middle;" class="img-responsive" src="https://external.webstorage.gr/Product-Images/1312102/quest-slimbook-convertible-1000-1312102.jpg" alt="...">
          <div>
            <h4 style="overflow-wrap: break-word; word-wrap: break-word;" class="text-center">Laptop Quest Slimbook 360 Convertible - 13.3 Laptop Quest Slimbook 360 Convertible - 13.3Laptop Quest Slimbook 360 Convertible - 13.3" (Celeron N3350/4GB/32GB/HD)</h4>
          </div>
          <div class="text-center" style="margin-top:auto;">
            <span style="color:yellow;background-color:red;font-size:18px;">-40% OFF NOW!</span>
          </div>
          <div>
            <h5 class="text-center" style="margin-right:5px; font-size:18px;"><span style="text-decoration: line-through; color:black; font-size:22px;"><span style="color:red; font-size:20px">$349</span></span> $249</h5>
          </div>
          <div class="text-center">
            <button class="btn btn-success add_to_cart" style="margin-bottom:5px;">Add to cart</button>
          </div>
        </div>  <div class="col-sm-6 col-md-3 d-flex flex-column" style="cursor:pointer; transition: border .2s ease-in-out; margin:15px; border: 1px solid #ddd; border-radius: 4px; height:auto; box-shadow: 0 2px 3px rgba(0,0,0,.075);">
          <img style="vertical-align: middle;" class="img-responsive" src="https://i.dell.com/das/xa.ashx/global-site-design%20web/00000000-0000-0000-0000-000000000000/1/LargePNG?id=Dell/Product_Images/Dell_Client_Products/Notebooks/Latitude_Notebooks/12_7275/global_spi/notebook-latitude-12-7275-black-left-windows-hero-504x350.psd"
            alt="...">
          <div>
            <h4 style="overflow-wrap: break-word; word-wrap: break-word;flex:1;" class="text-center">Laptop Dell XPS 9250 12.5" (m56Y57/8GB/256GB/ HD)</h4>
          </div>
          <div class="text-center" style="margin-top:auto;">
            <span style="color:yellow;background-color:red;font-size:18px;">-67% OFF NOW!</span>
          </div>
          <div>
            <h5 class="text-center" style="margin-right:5px; font-size:18px;"><span style="text-decoration: line-through; color:black; font-size:22px;"><span style="color:red; font-size:20px">$2499.99</span></span> $1499.99</h5>
          </div>
          <div class="text-center" style="">
            <button class="btn btn-success add_to_cart" style="margin-bottom:5px;">Add to cart</button>
          </div>
        </div>
      
        <div class="col-sm-6 col-md-3  d-flex flex-column" style="cursor:pointer; transition: border .2s ease-in-out; margin:15px; border: 1px solid #ddd; border-radius: 4px; height:auto; box-shadow: 0 2px 3px rgba(0,0,0,.075);">
          <img style="vertical-align: middle;" class="img-responsive" src="https://external.webstorage.gr/Product-Images/1312102/quest-slimbook-convertible-1000-1312102.jpg" alt="...">
          <div>
            <h4 style="overflow-wrap: break-word; word-wrap: break-word;" class="text-center">Laptop Quest Slimbook 360 Convertible - 13.3 Laptop Quest Slimbook 360 Convertible - 13.3" (Celeron N3350/4GB/32GB/HD)</h4>
          </div>
          <div class="text-center" style="margin-top:auto;">
            <span style="color:yellow;background-color:red;font-size:18px;">-40% OFF NOW!</span>
          </div>
          <div>
            <h5 class="text-center" style="margin-right:5px; font-size:18px;"><span style="text-decoration: line-through; color:black; font-size:22px;"><span style="color:red; font-size:20px">$349</span></span> $249</h5>
          </div>
          <div class="text-center">
            <button class="btn btn-success add_to_cart" style="margin-bottom:5px;">Add to cart</button>
          </div>
        </div>
      </div>

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2016-12-03
        • 1970-01-01
        • 2019-01-22
        • 2018-08-24
        • 2018-01-24
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多