水平對齊div

我有this的代碼。水平對齊div

希望div與紅色div對齊，而不會影響頁面的其餘部分。

請注意，div＃leftcontent不會進入頁面的底部，我不理解爲什麼。也許解決的辦法是把div＃leftcontent對齊到頁面底部。但是如何？

謝謝。

來源

2011-04-18 ridermansb

您是在尋找純粹的CSS解決方案還是您願意更改HTML？ – 2011-04-18 23:24:52

你想要一個像頁腳一樣的東西嗎？ – Dnns 2011-04-18 23:25:00

我希望它只是在CSS的變化我想div在頁面底部保持紅色。 – ridermansb 2011-04-18 23:29:58

你必須改變紅格：

bottom: 0px; /*delete*/ 
position:relative; 
maring-top: 86px; /*to align to the blue*/

檢查了這一點：http://jsfiddle.net/85unG/48/

和高度，原因它不觸及底部：

的div＃包裝{ height：768px;/應該是739 px;/ }

來源

2011-04-18 23:28:55 danniel

請注意，CSS不處理'''註釋。 – alex 2011-04-18 23:36:44

感謝它的工作！ – ridermansb 2011-04-19 01:43:55

CSS absolute positioning來救援！

第一溝固定height和overflow:auto爲div#wrap。與overflow:hidden更換overflow:auto：

div#wrap 
{ 
    width:1024px; 
    /*height:768px; /* Forget about it! */ 
    margin:5px auto; 
    border:2px solid #ccc; 
    /*overflow:auto;/* Forget about it! */ overflow:hidden; 
    position:relative; 
}

...現在注意div#wrap有一個相對位置：

div#wrap 
{ 
    width:1024px; 
    margin:5px auto; 
    border:2px solid #ccc; 
    overflow:hidden; 
    position:relative; /* AWESOME */ 
}

這意味着div#wrap非靜態定位，所以我們可以在它絕對定位的東西.. 。像div#footer和div#social-networks：

div#wrap div#leftcontent div#footer { 
    position:absolute; 
    bottom:0px; 
} 
div#wrap div#nav div#social-networks { 
    position:absolute; 
    bottom:0px; 
}

該W生病位置div#footer和div#social-networks0px的底部邊緣遠離其非靜態定位祖先的底部邊緣 - 即div#wrap。

壞消息雖然：定位東西絕對會搞砸東西的自然流動，所以您必須手動爲div#footer和div#social-networks預留一些空間。通過padding執行此操作：

div#wrap 
{ 
    width:1024px; 
    margin:5px auto; 
    border:2px solid #ccc; 
    overflow:hidden; 
    position:relative; 
    padding-bottom:50px; /* this is new... you can choose a better number than 50px */ 
}

來源

2011-04-18 23:51:25

水平對齊div

回答

相關問題