HTML浮动div的问题

Question

我有一个问题，正如我上面提到的。

在我的 Web 应用程序中，我将通过 jQuery(ASP.NET MVC) 动态生成许多 div。 每个新的 div 可以有不同的宽度，并且所有它们必须向左浮动

我尝试（测试）向左浮动 2 个 div，但没有成功。我做错了什么？

每个div都有一个定义的宽度，因为当所有div的总宽度>时mainDIV 的宽度，然后滚动条就会出现。现在，在这种情况下，这 2 个 div 不会向左浮动

这是代码

<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>

Answer 1

您必须确保包含的 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;
}

Answer 2

我会尝试以一种不必为每个元素执行 style= 的方式使用 CSS。如果没有更多的上下文和/或测试，我不能保证它会解决您的问题，但它有可能会解决并且有更好的形式。

为所有 div 标签设置 float:left 将

div {float:left;}

所有要向左浮动的 div 标签放在同一个类中

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

div.className {float:left;}

另外，请确保您没有指定任何类型的绝对位置，因为这将覆盖浮动。关于浮动和宽度似乎有一些微妙之处，所以也请检查一下http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
http://css.maxdesign.com.au/floatutorial/