Question

我在浮动多个DIV时遇到问题，让他们不再使用div。请参阅下面的代码作为示例。

<!DOCTYPE HTML>
<html lang="en-GB">
    <head>
        <meta charset="utf-8" />
        <style>
            * {
                -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
                -moz-box-sizing: border-box;    /* Firefox, other Gecko */
                box-sizing: border-box;         /* Opera/IE 8+ */
            }

            div.outer {
                width:300px;
                height:300px;
                border:3px solid #000;
                overflow:visible;
                padding:10px;
            }

            div.mid {
                overflow:hidden;
                border:1px solid #000;
                padding:0;
                width:485px;;
            }

            div.inner {
                width:150px;
                height:100px;
                background:#EDEDED;
                border:1px solid #C0C0C0;
                float:left;
                margin:5px;
            }

        </style>
    </head>

    <body class="landingPage">
        <div class="outer">
            <div class="mid">
                <div class="inner"></div>
                <div class="inner"></div>
                <div class="inner"></div>
            </div>
        </div>
    </body>
</html>

这很好用，但实际上，我不知道会有多少“内在”DIV，也不知道它们有多宽。因此，我不能将“width”属性放在div.mid CSS中。但是，每当我移除宽度时，内部DIV都会换行。

有人可以帮忙吗？不幸的是，盒子大小的属性必须保持

here is the fiddle

Answer 1

你可以采取内部div并设置width: auto;和max-width: 150px;，如果你知道必须是最多的，但你不知道它们的大小。

Answer 2

当我必须封装未知大小的内容时，我尝试做一些事情：

除宽度外还使用max-width
对内部任何内容使用百分比而不是固定宽度。
尝试使用box-sizing：content-box而不是border-box。

如何浮动未定宽度的块

2 个答案: