css - HTML float div 的问题

Question

我遇到了上面提到的问题。

在我的网络应用程序中，我将通过 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 足够宽以并排容纳 float 的 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;
}