HTML浮動div的問題

我有一個問題，因爲我上面提到。HTML浮動div的問題

在我的web應用程序中，我將通過jQuery（ASP.NET MVC）動態生成許多div。每個新的div可以有不同的寬度，並且他們全部MUST be floated to the left

我試過（測試）浮動到左邊的2個div，但沒有成功。我究竟做錯了什麼？

Each div has a defined width, because when the total width of all divs > mainDIV's width, then the scrollbar will appear. Now, in that case, this 2 divs are not floated to the left

下面的代碼

<div id="mainDIV" style="overflow:auto; width:100%;"> 
    <div style="width:960px; float:left; background-color:Lime;"> 
     a 
    </div> 
    <div style="width:960px; float:left; background-color:Red;"> 
     b 
    </div> 
</div>

來源

2010-11-16 Tony

你必須確保包含div足夠寬側，以適應浮動div的一面。

所以在你的例子中，你將不得不將包含div mainDIV的寬度設置爲至少1920px。

，如果你想在滾動條出現在mainDIV你需要一個額外的包裝：

HTML：

<div id="mainDIV" style="overflow:auto; width:100%;"> 
    <div id="wrapper"> 
    <div style="width:960px; float:left; background-color:Lime;"> 
     a 
    </div> 
    <div style="width:960px; float:left; background-color:Red;"> 
     b 
    </div> 
    </div> 
</div>

CSS：

#wrapper { 
    width: 1920px; 
}

來源

2010-11-16 16:19:51 jeroen

在這種情況下，我需要改變溢出：自動溢出-x：滾動 – Tony 2010-11-16 16:43:58

我會嘗試在沒有做風格的方式來使用CSS =每個元素。沒有更多的上下文和/或測試，我不能保證它能解決你的問題，但它可能會和它的更好的形式。

要麼設置浮動：左爲所有div標籤

div {float:left;}

投入浮動留在同一類

<div class="className" style="width:960px; background-color:Red;"> 
a 
</div> 

div.className {float:left;}

也都div標籤，請確保您不指定任何種類的絕對位置，因爲這將覆蓋浮動。似乎有關於浮動和寬度的一些細微之處，所以檢查出那些過於http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
http://css.maxdesign.com.au/floatutorial/

來源

2010-11-16 16:15:37

HTML浮動div的問題

回答

相關問題