Html 为什么css3多栏布局'；s float导致元素'；宽度等于一列'；在所有浏览器中的宽度是多少？

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

这是我的HTML（）：

如果您在浏览器中检查#侧菜单，您将看到，尽管它是3列可见的，并且应该有它们的宽度，但它只有第一列的宽度

我怎样才能解决这个问题？（红色文本应位于右侧最后一个框的旁边）

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

---

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

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

因此#侧菜单必须具有“position:relative；”，然后在javascript中设置style.left至少为可以通过document.getElementById（'columnContainer'）.clientWidth获得的列容器的宽度

如果您需要，我可以在这里提供JSFIDLE或更多代码

您必须调用javascript函数onbody load，至少在窗口大小发生变化时是这样

---

祝你好运

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

因此#侧菜单必须具有“position:relative；”，然后在javascript中设置style.left至少为可以通过document.getElementById（'columnContainer'）.clientWidth获得的列容器的宽度

如果您需要，我可以在这里提供JSFIDLE或更多代码

您必须调用javascript函数onbody load，至少在窗口大小发生变化时是这样

---

祝你好运

在CSS样式表中为“.content”元素设置一个“clear:tware”规则如何？不幸的是，这并不能解决问题，@user2340218。然后尝试为“#sideMenu”元素添加“display:inline block”和“width:nn%”规则，同时保持其“float:left”规则也没有帮助。我想我会选择transform：translateX（-100%）；用于显示/隐藏菜单，但在我有问题时，这将不起作用。。还有什么想法吗？也许列布局应该是这样的，它是用某种标准编写的？我只是不明白为什么要给浏览器一个选项，只设置列宽（不指定列数），但实现浏览器时，元素的宽度是错误的……在CSS样式表中为“.content”元素设置一个“clear:tware”规则怎么样？不幸的是，这并不能解决问题，@user2340218。然后尝试添加“display:inline block”对于“#sideMenu”元素，在保留其“float:left”规则的同时，使用“width:nn%”规则也没有帮助。我想我会选择transform：translateX（-100%）；用于显示/隐藏菜单，但在我有问题时，这将不起作用。。还有什么想法吗？也许列布局应该是这样的，它是用某种标准编写的？我只是不明白为什么要给出一个只设置列宽（而不指定列数）的选项，而是以这样一种方式实现浏览器，即元素的宽度是错误的……如果您可以提供JSFIDLE和/或在这里粘贴一些代码的话。我试着自己做这件事，但是我发现栏目间隙没有正确地显示（更多的是28个PX）。在试图让我的想法和你的小提琴一起工作之后，我认为你应该考虑使用CSS Flex来做用例——这真的好多了。在我的例子中，我认为使用css专栏的唯一原因是使用常规文本来获得报纸专栏的效果。但在您的情况下，css flex Box应该更容易解决您的问题。如果你想展示一些示例代码，请告诉我。如果你能提供一个JSFIDLE和/或在这里粘贴一些代码。我试着自己做这件事，但是我发现栏目间隙没有正确地显示（更多的是28个PX）。在试图让我的想法和你的小提琴一起工作之后，我认为你应该考虑使用CSS Flex来做用例——这真的好多了。在我的例子中，我认为使用css专栏的唯一原因是使用常规文本来获得报纸专栏的效果。但在您的情况下，css flex Box应该更容易解决您的问题。请让我知道，如果你想为你展示一些样本代码。

<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>    

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;
}