努力按照預期使用浮點數排列元素

Question

我正在調整CMS上的模板。在主頁面上，我想排列的從左到右的特定元素是（description：元素名稱/ id/class）：

• 如何使用報告框（div id =「內容 「）
• 地圖（DIV ID =」 地圖 「）
• 類別過濾器（DIV ID =」 右「）

所有DIV嵌套在 」主中間「。

而不是發佈一個相當大段HTML，下面是檢查元素的頁面結構的屏幕：

對我來說，主要的困惑是，如何在舉報箱（目前頁面的底部），不會隨着地圖和類別過濾器一起浮動，而是保留在這些元素下面。如何報告框（div id =「content」）有一個「寄養」父母。它曾經生活在類別過濾器下，我把它拉上了一個層次，成爲兄弟姐妹，並提到了另外兩個元素。

我試着擺弄現有的邊距，浮動和嵌套的元素。

鏈接是在這裏：http://tinyurl.com/lnrtfdo

右欄是它應該是和地圖，這將變得更薄是它應該是（中間）。地圖下面的方法應該是左列，因此頂部與地圖的頂部一致（而地圖會更細）

在網站上，地圖太大而無法浮動，但如果你將寬度調整爲300px，下面的元素，How To Report Box，不會向上移動，直到它保持原位。

這是每個元素的CURRENT CSS。添加浮動：對每個人都沒有解決：

The Category Filters: 
div#right { 
width: 285px; 
padding: 0; 
float: right; 
} 

The Map 
border: #999 1px solid; 
width: 800px; 
height: 366px; 
position: relative; 
height: 650px; 
border-radius: 19px; 

The Stubborn How to Box that Won't Float 
div#main .withright div#content { 
margin: 0 325px 0 0; 
padding: 0; 

我怎樣才能得到如何框到左上角的正確位置？

Answer 1

您的「如何報告」部分（.additional-content）位於#content內，其固定寬度爲960px 和上有一個clearfix類。我不確定你爲什麼期望它會在#map的旁邊浮動，這是#content的兄弟。爲了漂浮兩個彼此相鄰的元素，他們必須是兄弟姐妹。

您需要備份一下並重新考慮一般的佈局。考慮使用display: inline-block而不是浮點數，如果您實際上不需要浮點數行爲，這可能會產生問題。

---

更新：如果你做所有這些，你可以得到#map和＃內容在一行內發揮很好：

• 設置#map到600px的寬或更小和浮動是正確的（寬度：580（長）和保證金權：20px的工作做好）
• 取出結算的div立即#map和#mapStatus如下左圖
• 浮動＃內容，它的寬度設置爲auto，並刪除其右邊緣

...

#map { 
    float: right; 
    width: 580px; 
    margin-right: 20px !important; /* better, remove !important from elsewhere */ 
} 
#content { 
    float: left; 
    width: auto; 
    margin-right: 0 !important; /* better, remove !important from elsewhere */ 
}