Question

另一个网络人员在使用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 );
}

Answer 1

每个浏览器都不了解max-width和min-width指令。正如您希望元素浮动到固定宽度一样，只需定义宽度您给出的百分比始终是父元素。因此，如果您没有定义父级的宽度（页面或另一个div），浏览器会自己计算宽度。有些浏览器会根据内容做到这一点您还应该绝对定义overflow - 行为，因为如果您没有告诉他们，则某些浏览器会扩展div。
最后：不要混淆float - 方向，因为这会使一切变得复杂。只需将具有相同float - 方向的元素一个接一个地排列（在您的情况下'正确'，将每个后续元素添加到前一个元素），它们将按此方式排序。

你的风格可以这样说：

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

浮动布局溢出

1 个答案: