html - 使文本始终停留在响应式网站的图像底部

Question

我在每张图片下方都有一个小的 div，当我的网站在小型设备上查看时，我也需要将其恰好放在图片的底部。我的整个网站已经在 Bootstrap-3 中了，但现在我当前的代码在较小的设备上查看时会在图像的一半位置显示名为 DATA 的小 div。

两个问题: 1 - 如何使 div(数据)始终具有响应图像的响应宽度？ 2 - 如何确保 div(数据)始终针对不同的设备尺寸停留在图像的底部？

我在弄乱 top:400px 但我做不对，width 实际上应该始终为 100%，即图像的宽度，但仍然是我的 div伸出太多...

.image {
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  display: block;
  padding: 0px;
}

.data {
  font-size: 11px;
  font-family: 'Source Sans Pro',sans-serif;
  font-style: normal;
  color: #FFF;
  font-weight: 700;
  background-color: #000;
  opacity: 0.7;
  padding: 0 10px 0 10px;
  border-bottom: 0px solid #FFF;
  z-index: 3;
  display: block;
  position: absolute;
  opacity: 0.7;
  top: 400px;
  left: 0;
  min-width: 100%;
}

<div class="block">
    <div class="item">
      <div class="image"><img alt="" src="http://lorempixel.com/400/400" /></div>

      <div class="tag">
        <a href="#">TAG</a>
      </div>

      <div class="title">
        <a href="#">title</a>
      </div>

      <div class="data">
        <div class="date">
          01012001

          <div class="author">
            Author
          </div>
        </div>
      </div>
    </div>
  </div>

Answer 1

希望我理解正确...所以，您的问题是:

1. Div.data 必须始终占图像宽度的 100%？
2. Div .data 必须始终位于图像的底部？

所以检查一下:

.image {
  position: relative;
  display: inline-block; /* This can be inline too */
  margin: 0 auto;
  padding: 0px;
}

.image .data {
  padding: 0 10px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  
  background-color: rgba(0, 0, 0, 0.7);
  
  font-size: 11px;
  font-family: 'Source Sans Pro',sans-serif;
  font-style: normal;
  font-weight: 700;
  color: #FFF;
}

<div class="block">
    <div class="item">
      <div class="image">
        
        <img alt="" src="http://lorempixel.com/400/400" />
      
        <div class="data">
          <div class="date">
            01012001

            <div class="author">
              Author
            </div>
          </div>
        </div>
      </div>

      <div class="tag">
        <a href="#">TAG</a>
      </div>

      <div class="title">
        <a href="#">title</a>
      </div>

    </div>
  </div>

一些建议——尝试对 CSS 样式进行分组。使用更好的选择器。尝试使用所有 HTML 5 标签 - 例如，图像可以用 figure 标签和 .data 元素包裹 - 可以只是 figurecaption。

祝你好运!