Question

我正在为我的一位朋友在网站上工作，他是一位画家。在他的主页上，我想用他最近的5件作品做一个水平滚动的画廊。此外，这个想法是，当一个人在他的每个图像上盘旋时，他们会看到绘画的名称和实际大小（例如，对于可能有兴趣联系他以进行购买的人）。

无论如何，我设法制作了横向滚动的小画廊，这非常简单，我似乎确实在制作悬停效果的正确道路上（我跟着this tutorial），除了我的div（保持图像和叠加信息不会接受我分配给它的宽度。

这就是我的html看起来的样子（它实际上是php，但是php部分运行得很好）：

<div class="imagem">
  <ul>
    <?php for ($i = 0; $i < 5; $i++) { ?>
      <li>
        <div class="img">
          <img src="static/css/images/exemplo1.jpg" style="height: 40vh;" />
          <div class="overlay">
            <p>Name of the Painting</p>
            <p>45cm x 37cm</p>
          </div>
        </div>
      </li>
    <?php } ?>
  </ul>
</div>

然后我对这部分的css看起来像这样：

.container .imagem {
  /*background-color: rgba(41, 41, 41, 0.1);*/
  border-top: 1px solid #292929;
  border-bottom: 1px solid #292929;

  padding: 30px 0;
  padding-bottom: 20px;

  width: 90%;

  overflow-x: scroll;
  overflow-y: hidden;

  -ms-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);

  position: relative;
  left: 50%;
}

.container .imagem::-webkit-scrollbar {
  display: none;
}

.container .imagem ul {
  white-space: nowrap;
}

.container .imagem li {
  display: inline-block;
}

.container .imagem .img {
  display: inline-block;
}

.container .imagem .img .overlay {
  display: inline-block;
  z-index: 20;
  background: rgba(0, 0, 0, 0.8);
  overflow: hidden;
  transition: all 0.5s;
  color: rgba(255, 255, 255, 0.5);


  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 0;
}

.container .imagem .img:hover .overlay {
  height: 100%;
}

我也在使用Bootstrap，这实际上是我的第一个项目，所以我不确定我是否可以从中获得任何问题。

无论如何，这已经让我疯了一段时间了。我对HTML5或php并不是非常有经验，所以我把这个项目作为一种学习更多关于它的方法并获得更多实用知识，但是，我从来没有像这样的问题。叠加层div将是我创建的小图库的100％，或者它将是p标记中文本的确切宽度。

我尝试了很多东西，例如更改显示，将宽度设置为继承，自动，100％，根本不放入，在HTML中编码（看看我是否可以覆盖任何我没有的东西＆＃39我意识到并没有任何效果，我描述的两个宽度总是我得到的唯一宽度。

https://jsfiddle.net/uw0cz2yk/

Answer 1

我不认为立场：绝对;将在没有父级位置设置的子元素上工作。尝试在.overlay的父级上设置position：relative，在这种情况下，它是你的.img类。

宽度属性不适用于绝对定位的div

1 个答案: