Html 水平对齐div

我有密码

希望div将蓝色与红色div对齐，而不影响页面的其余部分

请注意，div#leftcontent没有放到页面底部，我不明白为什么。 也许解决方案是将div#leftcontent与页面底部对齐。但是怎么做呢

---

谢谢。

您必须更改红色div：

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

看看这个：

至于高度，其不接触底部的原因是：

div#wrap{ 高度：768px；/739px/ }

CSS救命

首先，为

div#wrap

设置固定的

height

和

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#社交网络

：

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

这将使

div#footer

和

div#socialnetworks

0px

的底部边缘远离其非静态定位祖先的底部边缘，即

div#wrap

但坏消息是：定位事物绝对会破坏事物的自然流动，因此您必须手动为

div\35; footer

和

div\35;社交网络

预留一些空间。使用

填充执行此操作

：

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 */
}

---

你是在寻找纯CSS解决方案还是愿意更改HTML？你想要像页脚这样的东西吗？我希望这只是CSS中的一个更改，我希望div在页面底部保持红色。为什么你对

div#wrap

有固定的

宽度和
高度
/
注释。