劃分框沒有正確定位

這裏是2個div的代碼。它以div.main橫向延伸到頁面上，div.navigation放置在它的左側。如果我爲div.navigation放置float：top，則內容保留在div.main下方的相同位置，但該框本身延伸div.main。劃分框沒有正確定位

div.navigation 
{ 
    margin-top: 0px; 
    text-align: center; 
    border: solid #079EA3 1px; 
    float: left; 
    width: 160px; 
    padding: 5px; 
} 
div.main 
{ 
    margin-top: 0px; 
    clear: left; 
    float: left; 
    border: solid #079EA3 1px; 
    margin-left: 194px; 
    padding: 5px; 
}

更新！這是jsFiddle中的2個div的代碼和結果。

http://jsfiddle.net/mqpkdefy/2/

來源

2014-10-01 Roland Jegorov

你能告訴我們一個jsFiddle嗎？我沒有看到你的問題：http://jsfiddle.net/mqpkdefy/ – 2014-10-01 07:20:56

嘿，你僅僅需要從div.main

刪除CSS屬性Clear:left看到它working

來源

2014-10-01 07:26:00 undefinedtoken

div.navigation仍然被推到div.main邊界以下。除了我發佈的CSS代碼之外，沒有其他div.main的設置參數。也許你會需要一些其他的代碼？ – 2014-10-01 07:53:22

嘿刪除明確：從主DIV左，或設置爲明確：對;

div.navigation 
{ 
    margin-top: 0px; 
    text-align: center; 
    border: solid #079EA3 1px; 
    float: left; 
    width: 160px; 
    padding: 5px; 
} 
div.main 
{ 
    margin-top: 0px; 
    clear: right;   /*changes done*/ 
    float: left; 
    border: solid #079EA3 1px; 
    margin-left: 194px; 
    padding: 5px; 
}

來源

2014-10-01 07:32:14

div.navigation仍被推到div.main邊界下方。除了我發佈的CSS代碼之外，沒有其他div.main的設置參數。也許你會需要一些其他的代碼？ – 2014-10-01 07:52:34

哪個詞典應出現在左側？導航或內容？ – 2014-10-01 08:36:44

這裏是working Fiddle。默認情況下，DIV是阻止它會佔用整個瀏覽器的寬度，如果你沒有指定任何寬度它級元素..

div.navigation 
{ 
    margin-top: 0px; 
    text-align: center; 
    border: solid #079EA3 1px; 
    float: left; 
    width: 20%; /*changes done*/ 
    padding: 5px; 
} 
div.main 
{ 
    margin-top: 0px; 
    clear: left; 
    float: left; 
    border: solid #079EA3 1px; 
    width:70%; /*changes done must provide the width to the main div */ 
    padding: 5px; 
    margin-right:20px /*changes done*/ 
}

如果你想導航是左手邊的手段，在這裏是鏈接Working Fiddle只要將導航div放在主div上方

來源

2014-10-01 08:44:58

我會評論Adarsh Gowda KR的答案，但我剛從這裏開始。

我已經刪除了清除：左側和更改後的浮動：左側浮動：右側，因爲我假設你想要左側的主導航菜單，因爲它在原始的小提琴示例中顯示的位置。

菜單和主div的被包裹在與類內容一個div其具有960像素

一個固定的寬度作爲阿達什訥·高達KR建議主DIV ...具有塊的顯示類型，這意味着它佔用整個瀏覽器寬度。

div.navigation 
 
{ 
 
    margin-top: 0px; 
 
    text-align: center; 
 
    border: solid #079EA3 1px; 
 
    float: left; 
 
    width: 160px; 
 
} 
 
div.main 
 
{ 
 
    float:right; 
 
    margin-top: 0px; 
 
    border: solid #079EA3 1px; 
 
    width:788px; 
 
} 
 

 
div.content{ 
 
    width:960px; 
 
}

見

http://jsfiddle.net/AuroraArcade/mqpkdefy/38/

來源

2014-10-01 09:07:17

您需要將主要div的寬度設置爲某個值。默認情況下，它需要100％的寬度.. 也刪除餘量，因爲它不是必需的

來源

2014-10-01 09:16:33 Vis

劃分框沒有正確定位

回答

相關問題