Question

我有这三个列图像，标题，标题广告图标，我无法正确对齐。是否有办法根据图像宽度修复标题和标题文本？处理这类内容的最佳做法是什么？我应该为每个屏幕尺寸对齐CSS吗？

＆＃13;

@import url('http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css');
 .urun-text {
  position: absolute;
  background-color: rgba(15, 15, 15, 0.93);
  color: #fff;
  bottom: 0px;
  text-align: left;
  padding: 20px 15px 20px 15px;
}
.urun-title {
  position: absolute;
  bottom: 80px;
  text-align: left;
  z-index: 15;
  padding-top: 5px;
  padding-bottom: 5px;
  color: #fff;
  padding-left: 20px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  background-color: rgba(194, 0, 0, 0.93);
  width: 100%;
}
.click-arrow-right {
  position: absolute;
  z-index: 16;
  color: #fff;
  font-size: 10px;
  bottom: 0px;
  right: 33px;
}

＆＃13;

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="product-box">
        <img src="http://i.imgur.com/xkAVZ3b.jpg" alt="Yeni Ürünler" class="align-center img-responsive">
        <div class="urun-title"><span class="glyphicon glyphicon-star"></span> YENİ ÜRÜNLER</div>
        <div class="urun-text">En yeni mobilya konseptlerini görmek için tıklayınız.</div>
        <div class="click-arrow-right"><span class="glyphicon glyphicon-arrow-right"></span>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="product-box">
        <img src="http://i.imgur.com/xkAVZ3b.jpg" alt="Yeni Ürünler" class="align-center img-responsive">
        <div class="urun-title"><span class="glyphicon glyphicon-star"></span> YENİ ÜRÜNLER</div>
        <div class="urun-text">En yeni mobilya konseptlerini görmek için tıklayınız.</div>
        <div class="click-arrow-right"><span class="glyphicon glyphicon-arrow-right"></span>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="product-box">
        <img src="http://i.imgur.com/xkAVZ3b.jpg" alt="Yeni Ürünler" class="align-center img-responsive">
        <div class="urun-title"><span class="glyphicon glyphicon-star"></span> YENİ ÜRÜNLER</div>
        <div class="urun-text">En yeni mobilya konseptlerini görmek için tıklayınız.</div>
        <div class="click-arrow-right"><span class="glyphicon glyphicon-arrow-right"></span>
        </div>
      </div>
    </div>
  </div>
  </div

＆＃13;

Answer 1

你去吧

http://jsfiddle.net/ajruk60t/3/

.product-box { 
    display:inline-block;
    position:relative;
}

.urun-title {
    width:100%;

}

.urun-text {
    width:100%;

}

将显示设置为inline-block，.product-box只能与其内容（即图像）一样宽，position:relative允许我们设置宽度嵌套.urun-title和.urun-text元素的宽度为.product-box宽度的100％。

将响应式Bootstrap图像与标题标题文本对齐

1 个答案: