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

我希望我理解你的权利......所以，你的问题是：

Div .data在图像上的宽度必须始终为100％？
div .data必须始终位于imate的底部？

请检查：

＆＃13;

gem uninstall heroku

＆＃13;

gem install heroku

＆＃13;

一些建议 - 尝试对css样式进行分组。使用更好的选择器。尝试使用所有HTML 5标签 - 例如，图像可以用图形标签包装，而.data元素 - 可以只是图形标记。

使文本始终贴在图像的底部，以便响应网站

1 个答案: