Javascript 浮动布局溢出

然而，另一个在使用HTML表格多年后试图学习浮动布局的网络家伙

我使用jQuery调用动态创建浮动div

每个div都受宽度、高度、最小宽度、最小高度、最大宽度和最大高度的约束。在大多数情况下，他们排得很好，但有时其中一个div会太短或太长

如果我欺骗页面（在chrome中弹出ctrl+shft+j或调整窗口大小），违规部分会自动拉回到原位

这是浏览器的缺点吗？我是在未定义行为的碎玻璃上跳舞吗

function createChartsHTML( size ) {
    var htmlString = "";
    for( var i = 0; i < size; i++ ) {
            htmlString += '<div id="unit';
            htmlString += i;
            if ( i % 2 == 0 )
                htmlString += '" style="width: 45%; min-width: 45%; max-width: 45%; height: 300px; margin: 0 100; float: left">';           // hammer this one into size!
            else
                htmlString += '" style="width: 45%; min-width: 45%; max-width: 45%; height: 300px; margin: 0 100; float: right">';      // bam !
            htmlString += '</div>';
            if ( (i+1) % 2 == 0 )
                htmlString += '<br style="clear:both">';
    }
    $('#charts_area').html( htmlString );
}

函数createChartsHTML（大小）{
var htmlString=“”；
对于（变量i=0；i
并非每个浏览器都理解
最大宽度
和
最小宽度
指令。因为您希望元素浮动到固定宽度，所以只需定义宽度即可。

您给出的百分比始终属于父元素。因此，如果您没有定义父元素（页面或其他div）的宽度，浏览器将自行计算宽度。某些浏览器将根据内容进行计算。

如果您没有告诉某些浏览器不要扩展
div
s，您还应该绝对定义
溢出
-行为。

最后：不要混淆
float
-方向，因为这会使事情复杂化。只需将具有相同
float
-方向的元素一个接一个地排列起来（在您的情况下，“right”可以将下面的每个元素添加到前面的元素中），它们将按这种方式排序

您的风格可能如下所示：

style="width: 45%; min-width: 45%; max-width: 45%; height: 300px; margin: 0 100; float: right;

这是一种向DOM添加元素的错误方法。请参阅查找document.createElement（）。请注意，您可以将样式放在CSS文件中或标记之间，而不必在元素上设置样式。WouterH：我的问题是这是基于Ajax的，如果我动态创建新的div，如何从createElement（）清除旧的div？如果我使用div.html（）我可以在那里写下新内容。.html（）策略哪里出了问题？这里有一些非常有用的细节。我无法定义父容器的宽度，因为我被指定使用某个框架（visualforce），如果它不可调整大小（液体），它会很碍眼。也许我应该这样做。检查溢出，但我可能会选择默认值（可见）。粘贴您建议的样式，但问题仍然存在=(