2014-08-28 222 views
0

我有一個佈局whitch是一樣的東西:顯示模塊不能正常工作

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

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

我想我所有的圖像具有相同的寬度,並在單個列,所以我使用的顯示塊:

#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/

+0

你需要閱讀'position:absolute'實際上做了什麼。 – CBroe 2014-08-28 10:29:46

+0

[CSS塊格式化上下文如何工作?](http://stackoverflow.com/questions/6196725/how-does-the-css-block-formatting-context-work) – AlvaroAV 2014-08-28 10:31:49

+0

但如果我刪除它,它會混淆覆蓋層! – user3982778 2014-08-28 10:32:20

回答

0

你只需要卸下.container絕對的位置,想在這個小提琴http://jsfiddle.net/w89qytrs/待觀察。 position: absolute對齊下一個父元素的左上角的元素,即position: relative

+0

對不起,我只注意到.container位置:絕對不在我的CSS!瀏覽器自己做... – user3982778 2014-08-28 10:53:22

+0

我不認爲瀏覽器是這樣做的邪惡。但是,如果設置了這個,在親戚後面使用''!important'''。 – 2014-08-28 11:02:54

+0

哈哈,謝謝,我相信我能夠解決它:p – user3982778 2014-08-28 11:11:58