父母身高不包含絕對定位的孩子

Question

我想擁有位於網站底部的「版權」<div>。當我嘗試在容器<div>內放置兩個<div>（id="div0"和id="copyright"）時，它不起作用。

現在對我來說令人迷惑，因爲我想到了一個<div>自然是塊元素，所以div0和copyright之間自然會有一個斷行和copyright將位於div0旁邊！

我不知道我做錯了什麼。我只使用HTML & CSS。

這裏是my demo。

Answer 1

您遇到的問題類似於jQueryUI slider: absolutely positioned element & parent container height，因爲容器id="div0"不適合包含子元素。你可以看到這個，如果你右鍵點擊 → 檢查在<div id="dev0">在Chrome瀏覽器，看到height = 0px。

position:absolute取元件出正常流動，這意味着它不留下間隙，其中元件應該通常是。

版權<div>在頂部呈現因爲以前<div>沒有高度，因爲它並沒有真正包含任何圖像（他們都是出來正常流動的）。

解決此問題的一種（快速）方法是簡單地將高度添加到<div id="dev0">。

你可能會認爲，使用不同的位置值將作爲工作position:relative確實留下一個缺口，其中元素應該通常是。然而，你不能在你的例子中使用它，因爲所有圖像的正常位置是內聯在一起的，所以你仍然會留下相同的容器高度問題。

另一種方法是將3張圖像左右浮動。這也有相同的問題，因爲浮動元素也超出了正常流程，但是有很多CSS方法來配置父元素來正確包含浮動子元素，例如CSS clear屬性。

在以下示例中，我選擇了overflow:hidden（請參閱http://colinaarts.com/articles/the-magic-of-overflow-hidden/），以使父代正確包含子代 - see demo。

CSS

我還刪除了很多重複的，也選擇了visibility:hidden和visibility:visible，而不是改變z-index。

body { 
    background-color: #5C5C3D; 
} 

#main { 
    position: relative; 
    width: 1366px; 
    margin: 0 auto; 
    background-color: #292929; 
    overflow: hidden; 
} 

#leftColumn { 
    float:left; 
} 

#rightColumn { 
    float: right; 
} 

#leftColumn, #rightColumn { 
    padding:20px 10px 0 10px; 
} 

#leftColumn img, #rightColumn img { 
    display:block; 
    margin-bottom:20px; 
} 

#img1, #img2, #img3, #img4, #img5, #img6 { 
    width: 253px; 
    height: 190px; 
} 

#imgCenter1, #imgCenter2, #imgCenter3, #imgCenter4, #imgCenter5, #imgCenter6 { 
    position: absolute; 
    top: 20px; 
    left: 278px; 
    width: 810px; 
    height: 610px; 
    visibility: hidden; 
} 

#img1:hover ~ #imgCenter1, #img2:hover ~ #imgCenter2, #img3:hover ~ #imgCenter3, #img4:hover ~ #imgCenter4, #img5:hover ~ #imgCenter5, #img6:hover ~ #imgCenter6 { 
    visibility: visible; 
} 

#copyright{ 
    position: relative; 
    margin:0 auto; 
    max-width: 1000px; 
    border: 2px solid white; 
    padding-top: 15px; 
    padding-bottom: 15px; 
    color:white; 
    background-color: #5C5C3D; 
    font-family: tahoma; 
    font-size: 0.8em; 
} 

HTML

<div id="main"> 
    <div id="leftColumn"> 
     <img id="img1" src="http://images2.wikia.nocookie.net/__cb20110205230838/pixar/images/thumb/1/1f/Pixar_Animation_Studios_2.jpg/800px-Pixar_Animation_Studios_2.jpg"/> 
     <img id="img2" src="http://www.jjtoy.com/wallpaper/original/Doc_Martin___Pixar_Cars_by_GrangerDesign.jpg"/> 
     <img id="img3" src="http://fc05.deviantart.net/fs49/f/2009/188/9/f/Rowdy_McQueen___Pixar_Cars_by_GrangerDesign.jpg"/> 
     <img id="imgCenter1" src="http://images2.wikia.nocookie.net/__cb20110205230838/pixar/images/thumb/1/1f/Pixar_Animation_Studios_2.jpg/800px-Pixar_Animation_Studios_2.jpg"> 
     <img id="imgCenter2" src="http://www.jjtoy.com/wallpaper/original/Doc_Martin___Pixar_Cars_by_GrangerDesign.jpg"> 
     <img id="imgCenter3" src="http://fc05.deviantart.net/fs49/f/2009/188/9/f/Rowdy_McQueen___Pixar_Cars_by_GrangerDesign.jpg"> 
    </div> 
    <div id="rightColumn"> 
     <img id="img4" src="http://www.dan-dare.org/FreeFun/Images/CartoonsMoviesTV/MonstersIncForTheBirdsWallpaper800.jpg"/> 
     <img id="img5" src="http://www.wallmay.net/thumbnails/detail/20120814/cartoons%20pixar%20disney%20company%20movies%20animated%20toy%20story%201600x1200%20wallpaper_www.wallmay.com_62.jpg"/> 
     <img id="img6" src="http://fc09.deviantart.net/fs26/i/2008/143/3/6/Wall_E_Jr____Pixar___iBook_by_iFab.jpg"/> 
     <img id="imgCenter4" src="http://www.dan-dare.org/FreeFun/Images/CartoonsMoviesTV/MonstersIncForTheBirdsWallpaper800.jpg"> 
     <img id="imgCenter5" src="http://www.wallmay.net/thumbnails/detail/20120814/cartoons%20pixar%20disney%20company%20movies%20animated%20toy%20story%201600x1200%20wallpaper_www.wallmay.com_62.jpg"> 
     <img id="imgCenter6" src="http://fc09.deviantart.net/fs26/i/2008/143/3/6/Wall_E_Jr____Pixar___iBook_by_iFab.jpg"> 
    </div> 
</div> 
<div id="copyright"> 
    <center>CSS 1st Homework</center> 
    <center>&#169;2013 by TS7<sup>TM</sup> from NEWBIESVN Team. All rights reserved.</center> 
</div> 

此外，<center>已被棄用，所以我想探討一個CSS的方式，如果你有時間來居中文本。

Answer 2

to big div。給CSS的像

position: relative; 
height: 700px; 

&版權DIV

#copyright { 
position: absolute; 
margin: 0 auto; 
width: 1000px; 
border: 2px solid white; 
padding-top: 15px; 
padding-bottom: 15px; 
color: white; 
background-color: #5C5C3D; 
left: 50%; 
margin-left: -500px; 
font-size: 0.8em; 
bottom: 0; 
} 

試試這個。我希望這會有所幫助。