9

我在 Google Chrome 中使用 flexboxes（只需要支持这个浏览器）来创建动态布局。我在一个 div 元素中有 n 个子元素，它们应该以相同的比例共享整个空间。由于新引入的弹性盒，这可以正常工作。但我还必须将每个内部 div 的高度设置为 0。如果我想将此 div 内的元素拉伸到 100% 高度，它使用给定值 0 而不是任何计算值。因为我选择了 flex-boxes 以防止使用 javascript，所以我更愿意保持这种方式。有没有其他方法可以使图像的高度填充 div？

这是代码（仅在 Google Chrome 中测试过）：

html

<div class="flexbox">
    <div><img src="chrome-logo.png" /></div>
    <div><img src="chrome-logo.png" /></div>
    <div><img src="chrome-logo.png" /></div>
    <div><img src="chrome-logo.png" /></div>
</div>

css

            .flexbox {
                display:-webkit-box;
                -webkit-box-orient:vertical;
                height:300px;
                width:200px;
            }
            .flexbox > div {
                -webkit-box-flex:1;
                height:0;
                border:solid 1px #000000;
            }
            .flexbox > div > img {
                height:100%;
            }

在浏览器中观看的代码

4

1 回答 1

8

好吧，经过数小时的研究，我让它工作了。要做以下改动：

.flexbox {
            display:-webkit-box;
            -webkit-box-orient:vertical;
            height:300px;
            width:200px;
        }
        .flexbox > div {
            -webkit-box-flex:1;
            height:0;
            border:solid 1px #000000;
            position:relative; /* CHANGE */
        }
        .flexbox > div > img {
            height:100%;
            position:absolute; /* CHANGE */
        }

如果您对此感兴趣，可以通过 ChromeDevTools 对 css 进行这些更改，您将看到正确的结果！

于 2011-12-27T23:42:14.733 回答