0

我在浮动多个 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，也不知道它们有多宽。因此，我不能在 div.mid CSS 中放置“width”属性。但是，每当我删除宽度时，内部 DIV 都会换行。

任何人都可以帮忙吗？不幸的是， box-sizing 属性必须保留

这是小提琴

4

2 回答 2

0

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

  1. 除宽度外使用最大宽度
  2. 对于内部的任何内容，使用百分比而不是固定宽度。
  3. 尝试 box-sizing: content-box 而不是边框​​框。
于 2013-09-19T15:40:59.923 回答
0

您可以采用内部div和设置width: auto;，max-width: 150px;如果您知道那必须是最大的，但您不知道它们的尺寸。

于 2013-09-19T14:48:09.550 回答