为什么css3多列布局的浮动导致元素的宽度在所有浏览器中都等于一列的宽度？

Question

我遇到了多列布局的问题。我将菜单设计为一组 div 元素，我想将它们对齐为 1-4 列（取决于屏幕高度和菜单项数）。它不能被硬编码。

这是我的 HTML (jsfiddle link)：

<nav id="sideMenu" class="side-nav">
    <article class="side-nav-content">
        <div class="content-box-nav-wrapper">
            <div class="content-box">
                <div class="box-header pre-box-header"></div>
                <div class="box-header">
                    <p>Option1</p>
                </div>
                <div class="box-header post-box-header"></div>
                <div class="box-content">
                    <a>Link1</a>
                    <a>Link2</a>
                </div>
            </div>
        </div>
        <div class="content-box-nav-wrapper">
            <div class="content-box">
                <div class="box-header pre-box-header"></div>
                <div class="box-header">
                    <p>Option1</p>
                </div>
                <div class="box-header post-box-header"></div>
                <div class="box-content">
                    <a>Link1</a>
                    <a>Link2</a>
                </div>
            </div>
        </div>
        <div class="content-box-nav-wrapper">
            <div class="content-box">
                <div class="box-header pre-box-header"></div>
                <div class="box-header">
                    <p>Option1</p>
                </div>
                <div class="box-header post-box-header"></div>
                <div class="box-content">
                    <a>Link1</a>
                    <a>Link2</a>
                </div>
            </div>
        </div>
        <div class="content-box-nav-wrapper">
            <div class="content-box">
                <div class="box-header pre-box-header"></div>
                <div class="box-header">
                    <p>Option1</p>
                </div>
                <div class="box-header post-box-header"></div>
                <div class="box-content">
                    <a>Link1</a>
                    <a>Link2</a>
                </div>
            </div>
        </div>
        <div class="content-box-nav-wrapper">
            <div class="content-box">
                <div class="box-header pre-box-header"></div>
                <div class="box-header">
                    <p>Option1</p>
                </div>
                <div class="box-header post-box-header"></div>
                <div class="box-content">
                    <a>Link1</a>
                    <a>Link2</a>
                </div>
            </div>
        </div>
    </article>
</nav>
<div class="content">
    <p class="wrong">This should be on the right side of mneu.</p>
</div>    

我的 CSS 看起来像这样：

p, a {
    color: black;
}

#sideMenu {
    float: left; /*This float seems to mess up column layout's width*/
}

article.side-nav-content {
    -webkit-column-width: 255px;
    -moz-column-width: 255px;
    column-width: 255px;
    -webkit-column-gap: 28px;
    -moz-column-gap: 28px;
    column-gap: 28px;
    -moz-column-fill: auto;
    height: 200px;
}

.side-nav .content-box {
    border: 1px solid #000;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    margin: 0px 0px 23px 0px;
    color: #fff;
    background: rgba(0, 0, 0, 0.1);
    width: 255px;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    column-break-inside: avoid;
    break-inside: avoid;
}

.content {
    width: 100vw;
    height: 100vh;
    float: left;
}

.wrong {
    color: red;
    font-size: 20px;
}

body {
    width: 200vw;
    overflow-x:hidden;
}

如果您在浏览器中检查#sideMenu，您会发现尽管它显示为 3 列并且应该具有它们的宽度，但它只有第一列宽度。

我该如何解决这个问题？ （红色文字应该在右侧最后一个框的旁边）

删除浮动不是一个好的解决方案，因为我需要在页面内容旁边使用它。

我需要菜单 div 和页面内容一样浮动，因为我希望我的菜单在用户点击时来回滑动。我想将用户操作的菜单宽度从 0% 修改为 100%，但这是不可能的，因为内容会干扰菜单。我已经用最新版本的 Chrome 和 Firefox 进行了测试。

Answer 1

我遇到了同样的问题，我想出的唯一方法是使用 javascript。 （因为列宽将根据列 div 中的内容量和窗口大小而动态变化）。

所以#sideMenu 必须有“位置：相对；”然后在 javascript 中将 style.left 设置为至少可以通过 document.getElementById('columnContainer').clientWidth 获得的列容器的宽度。

如果您需要，我可以在此处提供 jsfiddle 或更多代码。

至少，您必须调用 javascript 函数 onbody load 和任何时候寡妇大小发生变化。

祝你好运