css - 显示 block 不工作

Question

我的布局类似于:

 <div id="content">
        <div class="container">
           <div id="container-overlay"></div>
           <img>
        </div>

        <div class="container">
            <div id="container-overlay"></div>
            <img>
        </div>
    </div>

我希望我所有的图像都具有相同的宽度并在一列中，所以我使用了显示 block :

#content{
   position: relative;
}

.container{
   display: block;
}

.container-overlay{
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   position: absolute;
  }

img{
   width: 600px;
}

但是图片是并排显示的，而不是在一列中，我不确定为什么!!

您可以在这里查看真正的问题:http://layouttotest.tumblr.com/

Answer 1

你只需要删除 .container 上的绝对位置，就像在这个 fiddle 中看到的一样 http://jsfiddle.net/w89qytrs/ .position: absolute 将元素从下一个父元素的左上角对齐，即 position: relative。