浮动布局溢出

floating layouts spilling over

本文关键字：溢出 布局      更新时间：2023-09-26

又有一个web人员在使用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 );
}
并非每个浏览器都能理解max-width和min-width指令。如果您希望元素浮动到固定宽度，只需定义宽度即可
您给出的百分比始终为父元素。因此，如果您没有定义父级（页面或另一个div）的宽度，浏览器会自行计算宽度。一些浏览器会根据内容进行操作
您还应该完全定义overflow-行为，因为如果您没有告诉某些浏览器不要扩展divs，它们就会扩展。
最后：不要混淆float-方向，因为这会使一切变得复杂。只需将具有相同float方向的元素一个接一个地排列（在您的情况下，"right"将后面的每个元素向右添加到前面的元素），它们就会按照这种方式排序。

你的风格可能是这样的：

style="width: 45%; min-width: 45%; max-width: 45%; height: 300px; margin: 0 100; float: right;
相关文章：