对齐两个DIV

我有一个网页，如this（codes）。如你所见，有一个内容div。和一个固定在页面上的小div，并用它滚动。我想将它与内容div的左侧对齐。我会像this page。有一个包含社交分享按钮的小型固定框。它与剩下的内容对齐。我想这样做。对齐两个DIV

来源

2011-10-06 Eray

你想不使用javascript来做到这一点？ – Lucas

标记顺序是否重要？换句话说：div可以重新排列还是可以将小div放在内容中？ – NGLN

不，这不重要@NGLN – Eray

尝试this update of your fiddle。我认为它可以满足你的要求，但是当两个div的顺序可以重新排列时，有更好的解决方案。

来源

2011-10-07 11:28:32 NGLN

他将此标记为解决方案，因此它必须是所期望的，但他使用的是固定位置，以便小页面在页面滚动时保持不变。你的解决方案似乎是使用绝对定位，所以滚动页面失去它... – Lucas

@Lucas是的，我知道。在这里，你必须能够掌握所有未提及的欲望。 OP不想要一个固定的位置。他提到了一个例子，其中边框也滚动。（尽管时间不长，我现在看到...;））我会尽力找到时间来更新答案。 – NGLN

好点，我误解了自从他最初的例子固定以来，它的陈述和假设的方式，那就是他想要的。接得好。 – Lucas

你需要修改你的CSS为您sosyal-paylasim div来此（注意最后的2个元素）：

#sosyal-paylasim { 
    background-color: #F3F6FE; 
    border-color: #A5B2D0 #DBE4F3 #DBE4F3; 
    border-style: solid; 
    border-width: 2px 1px 1px; 
    box-shadow: 0 2px 3px #E2E2E2; 
    min-height: 150px; 
    overflow: hidden; 
    position: fixed; 
    top: 200px; 
    width: 64px; 
    z-index: 100; 

    left: 50%; 
    margin-left: -490px; 
}

进一步的解释可以发现here。

-----------编辑以DIV瓶外---------------

根据您的评论，如果你想它的外容器，使用此：

#sosyal-paylasim { 
    background-color: #F3F6FE; 
    border-color: #A5B2D0 #DBE4F3 #DBE4F3; 
    border-style: solid; 
    border-width: 2px 1px 1px; 
    box-shadow: 0 2px 3px #E2E2E2; 
    min-height: 150px; 
    overflow: hidden; 
    position: fixed; 
    top: 200px; 
    width: 64px; 
    z-index: 100; 

    left: 50%; 
    margin-left: -557px; 
}

诀窍是，你是中心与左边的DIV：50％，然后将它推回左方，主容器的宽度的一半（加上宽度div（64px）加上div（2px）的两个边界加上容器（1px）的左边界以使其位于外部）。

来源

2011-10-06 11:46:19 Lucas

但在你的代码中，保证金是**不是** auto？它是490px？ – Eray

另外，它在内容div里面。它必须在外面。 – Eray

@Eray我以为你想要它，我会编辑我的答案在外面。 – Lucas

回答

相关问题