Question

对于网页网格布局，我决定使用Flexbox。现在我想实现一些＆＃34;自动功能＆＃34;，以便以后可以插入网格框，而无需在HTML中添加类或样式。其中一个功能是使一个盒子总是高达75％的宽度 - 即使盒子的大小调整，例如，浏览器窗口调整大小。当然，如果盒子内容延伸75％ - 高度，它应该（并且只应该）增加其高度以适应内容。我搜索了几个小时才找到合适的解决方案，但我终于搞定了。所以我至少想过，直到我在框中添加了内容。

只要该框为空，自动宽高比就可以正常工作。如果我添加内容，则75％的宽度总是被添加到其内容通过扩展所具有的高度。我做了一个jsfiddle来清楚地看到问题所在：

JSFiddle wd5s9vq0，可视化以下代码：

HTML码：

<div class="container">
    <div class="content-cell"></div>
    <div class="content-cell"></div>
</div>

<div class="container">
    <div class="content-cell">
        This cell has an inreased height because of
        it's content. The empty space below the
        content is the 75% of the cells width.
    </div>
    <div class="content-cell"></div>
</div>

CSS：

.container {
    display: flex;
    width: 400px;
}

.content-cell {
    flex: 1 1 0;
    margin: 10px;

    background-color: #ccc;
}

.content-cell::after {
    content: "";

    display: block;
    padding-top: 75%;
}

如果我没有更好地了解它，它看起来像一个浮动问题 - 但我认为::before / ::after选择器应该在使用它的元素之前添加块元素在里面而不在里面。

有没有人知道如何解决这个问题？

Answer 1

这似乎是互联网上一个非常普遍的问题，你找到的大多数解决方案都是关于包装内容，绝对定位内容或两者兼而有之。这有许多依赖于案例的缺点。在玩了几个小时的代码之后，我终于发现了CSS比例的组合，无需添加任何DOM或使内容绝对定位。这看起来很基本，我想知道为什么我花了这么长时间，为什么你不能在网上找到它。

HTML：

<div class="mybox aspect-full">
    This is text, that would normally extend the box downwards.
    It is long, but not so long that it extends the intended aspect-ratio.
</div>

CSS：

.mybox {
    width: 200px;
}

.aspect-full::before {
    content: '';

    display: block;
    padding-top: 100%;
    float: left;
}

我唯一能找到的缺点就是你的细胞内容必须漂浮。如果在其中一个子对象上使用clear，它将位于扩展器块下方，您将回到原始问题。如果你需要清除这些宽高比单元格内的div的浮动，你可以考虑包装它们并保持包装器可浮动。

CSS Flexbox动态宽高比代码受内容

1 个答案: