如何在此布局中替换 flex？答案

【问题标题】：How to replace flex in this layout?如何在此布局中替换 flex？
【发布时间】：2014-12-09 21:47:03
【问题描述】：

我正在尝试为菜单做响应式设计，你可以看到代码 here。

如您所见，flex 非常适合该设计。我唯一担心的是它与旧版浏览器不兼容。有没有一种简单的方法可以在没有 flex 的情况下实现这一点，我试过在容器中只包含 div here

问题是我不知道如何让我的日志框出现在新日志框旁边。

我想保持响应能力（盒子在较小的屏幕上垂直堆叠）。

代码如下：

HTML：

    <div class="block-menu vertical">

        <div class="menu-item">My organizations</div>

        <div class="block-menu horizontal">

            <div class="block-menu vertical">

                <div class="menu-item">
                    ITPs
                </div>

                <div class="menu-item">
                    My log
                </div>

            </div>

            <div class="menu-item">

                New log

            </div>


        </div>

        <div class="menu-item">
            Profile
        </div>
    </div>
</div>

CSS：

div.block-menu.horizontal {

    display: flex;
    width: 100%;
    flex-wrap: wrap;
}

div.block-menu.horizontal > div {
    flex-grow: 1;
}

div.block-menu.vertical {
    display: flex;
    flex-direction: column;
}

div.block-menu.vertical > div.menu-item {
    width: auto;
}

.menu-container div.menu-item {
    padding: 20px;
    margin: 10px;
    background-color: red;
    flex-grow: 1;
}

【问题讨论】：

标签： html css responsive-design flexbox

【解决方案1】：

如果您添加一个额外的 div（就像在 flex 示例中一样），使用 float 和 width 的值是一种简单的操作，您可以在此处查看示例：http://jsfiddle.net/ggb2ecu7/3/

虽然这没有考虑到您在 flex 示例中的边距。要解决这个问题，您可以使用calc，如下所示：http://jsfiddle.net/ggb2ecu7/4/（对额外不必要的 CSS 规则感到抱歉）。例如：

.w2 {
    width: calc(100% - 20px);
}

[20px 因为我设置的边距是10px（两边=20px）]

calc 的问题在于它可能不适用于所有旧版本。你可以在这里查看对 calc 的支持：http://caniuse.com/#feat=calc

【讨论】：