水平对齐div

| 我有这个代码。希望div将蓝色与红色div对齐，而不会影响页面的其余部分。请注意，div＃leftcontent不在页面底部，我不明白为什么。也许解决方案是将div＃leftcontent对齐到页面底部。但是如何？谢谢。

已邀请:

2 个回复

您必须更改红色div：

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

检查一下：http://jsfiddle.net/85unG/48/ 对于高度，其未触及底部的原因是： div＃wrap { 高度：768px； /应为739像素； / }

眠缝

CSS绝对定位来抢救！首先将固定的height和the2ѭ切成div#wrap。将overflow:auto替换为overflow:hidden：

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;
}

...现在注意ѭ3具有相对位置：

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;
}

这样会将div#footer和div#social-networks0px的底边从其非静态祖先的底边即div#wrap移开。坏消息是：绝对定位会破坏事物的自然流动，因此您必须手动为reserve10和ѭ11预留一些空间。用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 */
}

要回复问题请先登录或注册

水平对齐div

2 个回复

发起人

html

alignment

css

问题状态

水平对齐div

与内容相关的链接

2 个回复

发起人

html

alignment

css

问题状态