HTML/CSS：絕對定位

我使用的是position: absolute;，所以我的div可以放在底部，但我也需要使用float: left;，這樣每個新的div都會放在它旁邊，但它們只是放在同一地點，有什麼建議？HTML/CSS：絕對定位

<!DOCTYPE html> 
<html> 
<head> 
    <style type="text/css"> 

     .media_container{ 
       min-width: 800px; max-height: 800px; 
       min-height: 300px; max-height: 300px; 
       border: 2px solid #f00; 
       position: relative; 
       } 

     .media_header{ 
       min-width: 220px; max-width: 220px; 
       min-height: 50px; max-height: 50px; 
       border: 2px solid #f00; 
       float: left; 
       /*position: absolute;*/ 
       margin-left: 30px; 
       bottom: 30px; 
       } 

    </style> 
    <title>Test</title> 
</head> 


<body> 

    <div class='media_container'> 

    <div class='media_header'>Header 1</div> 
    <div class='media_header'>Header 2</div> 
    <div class='media_header'>Header 3</div> 

    </div> 

</body>]

來源

2013-01-11 Crispy

@arttronics是的，謝謝！ – Crispy

jsFiddle DEMO

爲了在網頁下方的浮動div的，你的容器需要設置absolute，並放置在bottom。

然後，此容器中的所有內容都是relative以及您的浮動要求。完成！

.media_container { 
    position: absolute; 
    bottom: 0; 
    min-width: 800px; 
    max-height: 800px; 
    min-height: 300px; 
    max-height: 300px; 
    border: 2px solid #f00; 
} 
.media_header { 
    position: relative; 
    float: left; 
    margin-left: 30px; 
    margin-top: 30px; 
    min-width: 220px; 
    max-width: 220px; 
    min-height: 50px; 
    max-height: 50px; 
    border: 2px solid #f00; 
}

來源

2013-01-11 23:56:48 arttronics

如果所有div具有相同的position:absolute屬性，那麼它們都將重疊。

有一個父div你想要顯示在底部。和這個父母格與position:absolute和bottom:0

繼承人JSFIDDLE。我希望這是你想要的。

來源

2013-01-11 23:38:13 Usha

HTML/CSS：絕對定位

回答

相關問題