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

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函数来调用body load和widow size的变化。

好运