與浮點數和寬度有關

我有一個側邊欄和一個內容區域。我只是將邊欄放在左邊，內容區域放在右邊。但是當屏幕尺寸發生變化時我遇到了問題。這兩個浮體之間發生了顯着的空間。我認爲這是由於內容區域中圖像的大小，以及它正確地浮動。因此，我將這個內容區域也浮在左邊。現在內容區域不會延伸到屏幕的最右端。有沒有什麼辦法可以將內容區域放在正確的部分而沒有任何空間（只需劃分邊欄和內容區域就足夠了）？與浮點數和寬度有關

如果您需要更多解釋，請讓我知道。

來源

2012-10-09 user1012181

請提供您正在使用的HTML。使用JSFiddle.net來顯示工作演示 –

請在這裏發佈您的代碼......... –

這是網站：http://jilson.me/stack/ – user1012181

你的CSS改成這樣：

.dashContent { 
    float: left; 
    margin: 10px; 
    position: relative; 
    top: 25px; 
    min-width: 80%; 
} 

.sidebarDash { 
    float: left; 
    height: auto; 
    width: 195px; 
}

~~這將刪除的空間，同時也佈局~~ 保留流動性 - 刪除作爲OP想要一個固定的佈局

來源

2012-10-09 06:25:25

補充條不能變成流體！ – user1012181

這將是一個問題。使用混合佈局很棘手，因爲您會在某些屏幕尺寸上重疊。這種佈局是否設計爲最小屏幕尺寸？（僅適用於臺式機/筆記本電腦） –

是的。它是1024 x 768 – user1012181

廣場.sidebarDash與adsolute position，並給padding-left一樣的側邊欄寬度.dashContent

包裝這些在一兩個主要DIV的 -

<div class="dashContainer"> 

    <div class="sidebarDash"></div> 
    <div class="dashContent"></div> 

</div> <!-- Clears the float with CSS -->

CSS -

.dashContainer{ overflow: hidden; position: relative } 
.sidebarDash { position: absolute; left: 0; top: 0; width: 200px; } 
.dashContent { padding: 0 0 0 210px; }

的jQuery -

在文檔的<head>部分插入本 -

<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 

<script type="text/javascript"> 
    $(function(){ 
    var sidebarHeight = $('.sidebarDash').height(); 
    $('.dashContainer').css('min-height', sidebarHeight); 
    }) 
</script>

來源

2012-10-09 06:06:57 Dipak

但我不能使用固定寬度的內容區域。它應該靈活取決於屏幕尺寸！ – user1012181

這裏，它也會在屏幕尺寸發生變化時增加側邊欄大小！ – user1012181

不，我的意思是，當屏幕尺寸發生變化時，它也會增加邊欄的大小。但它應該是固定的寬度與靈活的內容區域 – user1012181

而不是使用浮動：正確使用浮動：左使雙方的div呆在一起，對這個撥弄一下

http://jsfiddle.net/FZZnk/

讓我知道這是否解決您的問題

來源

2012-10-09 06:24:08

補充條不能流動！ – user1012181

首先，你需要使用％，至所有的div的寬度。第二，你可以使兩者浮動到相同的一面（右邊或左邊），並使用百分比的margin或padding來填充這些div之間的空間。

.dashContainer{ overflow: hidden; width: 100%; } 
.sidebarDash { float: left; width: 20%; } 
.dashContent { float: left; width: 80%; }

現在，因爲你的左邊欄有一個固定的寬度和左浮動，你可以這樣做：去除浮動權，並添加在你身邊的大小吧利潤率左。並且不要忘記將div設置爲寬度：100％。

.dashContent { 
    float: right; 
    margin-left: 210px; 
    position: relative; 
    top: 25px; 
    width: 100%; }

來源

2012-10-09 06:30:45

補充工具欄不能流暢！ – user1012181

我明白了，使用這個：.dashContent {float}：right; margin-left：210px; 位置：相對; top：25px; 寬度：100％; } –

不不不不:)這是錯誤的。水平barrrr！ :) – user1012181

與浮點數和寬度有關

回答

相關問題