html - 如何替换此布局中的 flex？

Question

我正在尝试为菜单做一个响应式设计，你可以看到代码 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;
}

Answer 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