html - 使用 CSS 在 div 中创建 'bottom tab'？

Question

我正在尝试创建一系列 Bootstrap 列来模仿我得到的网站设计。

这些列有一个蓝色边框，div 的底部有一个更粗的边框。 边框没什么用，因为它会改变尺寸和可用空间，所以我尝试在其中简单地创建一个 div 以使用 background-color 和 width:100% 但是似乎也不起作用。

谁能告诉我解决这个问题的最佳方法？

谢谢。

.featuredCatalog {
  border-radius: 10px 10px 10px 10px;
  -moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px;
  border: 5px solid #00AEF0;
}
.shopTab {
  background-color: #00AEF0;
  width: 100%;
  min-height: 100%;
  margin: 0;
}

<div class="row">
  <div class="col-xs-6 col-sm-4 col-lg-2 featuredCatalog">
    <img class="img-responsive" src="https://placehold.it/191x131">
    <div class="shopTab">
      <h4>Shop Now</h4>
    </div>
  </div>
  <div class="col-xs-6 col-sm-4 col-lg-2 featuredCatalog">
    <img class="img-responsive" src="https://placehold.it/191x131">
    <h4>Shop Now</h4>
  </div>

  <div class="col-xs-6 col-sm-4 col-lg-2 featuredCatalog">
    <img class="img-responsive" src="https://placehold.it/191x131">
    <h4>Shop Now</h4>
  </div>

  <div class="col-xs-6 col-sm-4 col-lg-2 featuredCatalog">
    <img class="img-responsive" src="https://placehold.it/191x131">
    <h4>Shop Now</h4>
  </div>

  <div class="col-xs-6 col-sm-4 col-lg-2 featuredCatalog">
    <img class="img-responsive" src="https://placehold.it/191x131">
    <h4>Shop Now</h4>
  </div>
</div>

Answer 1

这是解决您的问题并创建像图片一样的产品展示的代码片段。

.shopTab {
  position:absolute;
  bottom:0;
  background-color: #00AEF0;
  width: 100%;
  height: 26%;
}

.product-display {
    position: relative;
    border-radius: 10px;
    border: 5px solid #00AEF0;
    margin: 10px auto;
    height: 160px;
    max-width: 160px;
}

.product-display img{
    display: block;
    width: 100%;
    height: 74%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-xs-6 col-sm-4 col-lg-2 featuredCatalog">
    <div class="product-display">
      <img class="img-responsive" src="https://placehold.it/191x131">
      <div class="shopTab">
        <h4>Shop Now</h4>
      </div>
    </div>
  </div>
  <div class="col-xs-6 col-sm-4 col-lg-2 featuredCatalog">
    <div class="product-display">
      <img class="img-responsive" src="https://placehold.it/191x131">
      <div class="shopTab">
        <h4>Shop Now</h4>
      </div>
    </div>
  </div>

  <div class="col-xs-6 col-sm-4 col-lg-2 featuredCatalog">
    <div class="product-display">
      <img class="img-responsive" src="https://placehold.it/191x131">
      <div class="shopTab">
        <h4>Shop Now</h4>
      </div>
    </div>
  </div>

  <div class="col-xs-6 col-sm-4 col-lg-2 featuredCatalog">
    <div class="product-display">
      <img class="img-responsive" src="https://placehold.it/191x131">
      <div class="shopTab">
        <h4>Shop Now</h4>
      </div>
    </div>
  </div>

  <div class="col-xs-6 col-sm-4 col-lg-2 featuredCatalog">
    <div class="product-display">
      <img class="img-responsive" src="https://placehold.it/191x131">
      <div class="shopTab">
        <h4>Shop Now</h4>
      </div>
    </div>
  </div>
</div>