具有位置相对的div的内联块显示

时间:2015-07-19 20:46:19

标签: css

我有一系列图像,每个图像都有自己的叠加层。如何让它们像内联块一样对齐?我尝试将display: inline-block;添加到.image-wrapper,但图片始终位于div.container的左上角(此处为jsfiddle)。

这是html和css

.container {
  position: relative;
}
.image-wrapper {
  position: relative;
  display: inline-block;
}
.tweetty {
  position: absolute;
  overflow: auto;
  top: 0;
  left: 0;
}
.image-vest {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #00f;
  width: 220px;
  height: 300px;
  opacity: 0.4;
  color: #fff;
}
<div class="container">

  <div class="image-wrapper">
    <div class="tweetty">
      <img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" />
    </div>
    <div class="image-vest">Tweetty-one</div>
  </div>

  <div class="image-wrapper">
    <div class="tweetty">
      <img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" />
    </div>
    <div class="image-vest">Tweetty-two</div>
  </div>

</div>

编辑:

使用dfsq建议修改了css,以从position:absolute;中移除.tweetty

引用dfsq评论: “具有绝对位置的元素不会影响其父容器的宽度和高度。因此,如果所有孩子都有position:absolute;

,那么图像包装器div就会崩溃,好像它们是空的一样

.container {
  position: relative;
}
.image-wrapper {
  position: relative;
  display: inline-block;
}
.tweetty {
  overflow: auto;
  top: 0;
  left: 0;
}
.image-vest {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #00f;
  width: 220px;
  height: 300px;
  opacity: 0.4;
  color: #fff;
}
<div class="container">

  <div class="image-wrapper">
    <div class="tweetty">
      <img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" />
    </div>
    <div class="image-vest">Tweetty-one</div>
  </div>

  <div class="image-wrapper">
    <div class="tweetty">
      <img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" />
    </div>
    <div class="image-vest">Tweetty-two</div>
  </div>
  <div class="image-wrapper">
    <div class="tweetty">
      <img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" />
    </div>
    <div class="image-vest">Tweetty-three</div>
  </div>
</div>

1 个答案:

答案 0 :(得分:1)

我摆弄小提琴,这似乎奏效了。除去了背心以外的所有位置。使用内联块显示模式。将顶部设置为-300px,以及底部边距,否则会在图像下方留下间隙。

&#13;
&#13;
.container {
/*    position:relative;*/
}
.image-wrapper {
/*    position: relative;*/
    display: inline-block;
}
.tweetty {
/*    position:absolute;
    overflow:auto;
    top:0;
    left:0;*/
}
.image-vest {
    position:relative;
    top:-300px;
    margin-bottom: -300px;
    left:0;
    background-color:#00f;
    width:220px;
    height:300px;
    opacity:0.4;
    color:#fff;
}
&#13;
<div class="container">

  <div class="image-wrapper">
    <div class="tweetty">
      <img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" />
    </div>
    <div class="image-vest">Tweetty-one</div>
  </div>

  <div class="image-wrapper">
    <div class="tweetty">
      <img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" />
    </div>
    <div class="image-vest">Tweetty-two</div>
  </div>

  <div class="image-wrapper">
    <div class="tweetty">
      <img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" />
    </div>
    <div class="image-vest">Tweetty-three</div>
  </div>
</div>
&#13;
&#13;
&#13;

(此处为JSFiddle版本)