對齊兩個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

回答

相關問題