爲什麼chrome在使用列時不使用所有寬度的使用？

Question

我遇到Chrome和列的問題。

我想擁有一組鏈接，每個鏈接的標題都組織爲不會在多列之間拆分的列。

我已經成功實現了firefox中的這個功能，即safari，但是chrome並沒有打球。

如果display：inline-block被移除，它幾乎可以工作，除非一切看起來都很混亂。

任何幫助將不勝感激 。

footer { 
 
    padding: 0px; 
 
    margin: 8px 0px 0px 0px; 
 
    background-color: #f5f5f5; 
 
    border-top: 1px solid #ddd; 
 
} 
 
footer .footerlinks { 
 
    columns: 170px; 
 
    -webkit-columns: 170px; 
 
    -moz-columns: 170px; 
 
    padding: 0px 0px 20px 0px; 
 
    margin: 0px 0px 0px 0px; 
 
} 
 
footer .footerset { 
 
    -webkit-column-break-inside: avoid; 
 
    -moz-column-break-inside: avoid; 
 
    break-inside: avoid; 
 
    display: inline-block; 
 
}

<footer> 
 
    <div class="container"> 
 
    <div class="footerlinks"> 
 
     <div class="footerset"> 
 
     <h3>qwerty</h3> 
 
     <ul> 
 
      <li><a href="#">fsfdsfsdfdsfdsfds</a> 
 
      </li> 
 
      <li><a href="#">feefrerefref</a> 
 
      </li> 
 
      <li><a href="#">fdsfdsfdsfdsfsdfdsfsdfds</a> 
 
      </li> 
 
      <li><a href="#">fdsfdsfdsfdsfsdfdsfd</a> 
 
      </li> 
 
      <li><a href="#">gdggdgfdvfdvffgbfdgfd</a> 
 
      </li> 
 
      <li><a href="#">gfdgdfgfdgfdgfdgfdgdf</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
     <div class="footerset"> 
 
     <h3>gdgdfvfdvfdvfdvfdvdfvfd</h3> 
 
     <ul> 
 
      <li><a href="#">vcxvcvxc</a> 
 
      </li> 
 
      <li><a href="#">vxcvcxvcxvcxvcxvcxvcxvcx</a> 
 
      </li> 
 
      <li><a href="#">fdsfdsfds</a> 
 
      </li> 
 
      <li><a href="#">vfdbfdsfd</a> 
 
      </li> 
 
      <li><a href="#">dfsbgsfngfsh</a> 
 
      </li> 
 
      <li><a href="#">bgsfvsd</a> 
 
      </li> 
 
      <li><a href="#">gfdgfdgfds</a> 
 
      </li> 
 
      <li><a href="#">gfdgdfgdfgdfgsd</a> 
 
      </li> 
 
      <li><a href="#">gfdgfdgfdgfdgfdgfdgfdgfdgdfsgfdgfd</a> 
 
      </li> 
 
      <li><a href="#">gfsgtrghtrgrwgtrrewgfdvdfbfsbfgbfsb</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
     <div class="footerset"> 
 
     <h3>dfdsfsdfds</h3> 
 
     <ul> 
 
      <li><a href="#">fdsfdsfdsfdsfsd</a> 
 
      </li> 
 
      <li><a href="#">fdsfdsfdsfsd</a> 
 
      </li> 
 
      <li><a href="#">fdsfdsfds</a> 
 
      </li> 
 
      <li><a href="#">fdsfdsfsdfdsfsd</a> 
 
      </li> 
 
      <li><a href="#">fsdfdsfdsfsdfds</a> 
 
      </li> 
 
      <li><a href="#">fsdfdsfdsfds</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
     <div class="footerset"> 
 
     <h3>fdsfdsafdsafsda</h3> 
 
     <ul> 
 
      <li><a href="#">fdsfdsafadsfsda</a> 
 
      </li> 
 
      <li><a href="#">fdsfdsfdsfdsfsdfdsfdsafds</a> 
 
      </li> 
 
      <li><a href="#">fdsfdsafdsfdsa</a> 
 
      </li> 
 
      <li><a href="#">fdsfdsfdsfdsfdadvfdfavree</a> 
 
      </li> 
 
      <li><a href="#">vdafdsafdsafdsaa</a> 
 
      </li> 
 
      <li><a href="#">fdsfdsafdsfdsfdsafdsafds</a> 
 
      </li> 
 
      <li><a href="#">fdsfdsafdsfsdn</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
     <div class="footerset"> 
 
     <h3>fdseneral</h3> 
 
     <ul> 
 
      <li><a href="#">dfadsfdafdsration</a> 
 
      </li> 
 
      <li><a href="#">fdsaountisrvices</a> 
 
      </li> 
 
      <li><a href="#">ssssccsasccounts</a> 
 
      </li> 
 
      <li><a href="#">saompaniescts</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</footer>

Answer 1

爲什麼不那樣做？

 

 
footer { 
 
    padding: 0px; 
 
    margin: 8px 0px 0px 0px; 
 
    background-color: #f5f5f5; 
 
    border-top: 1px solid #ddd; 
 
} 
 
footer .footerlinks { 
 
width: 100%; 
 
box-sizing: border-box; 
 
    padding: 0px 0px 20px 0px; 
 
    margin: 0px 0px 0px 0px; 
 
} 
 
footer .footerset { 
 
\t width: 33%; 
 
\t float: left; 
 
    padding: 16px; 
 
    box-sizing: border-box; 
 
} 
 
footer .footerset:nth-child(4) { 
 
\t clear: both; 
 
}

<footer> 
 
    <div class="container"> 
 
    <div class="footerlinks"> 
 
     <div class="footerset"> 
 
     <h3>qwerty</h3> 
 
     <ul> 
 
      <li><a href="#">fsfdsfsdfdsfdsfds</a> 
 
      </li> 
 
      <li><a href="#">feefrerefref</a> 
 
      </li> 
 
      <li><a href="#">fdsfdsfdsfdsfsdfdsfsdfds</a> 
 
      </li> 
 
      <li><a href="#">fdsfdsfdsfdsfsdfdsfd</a> 
 
      </li> 
 
      <li><a href="#">gdggdgfdvfdvffgbfdgfd</a> 
 
      </li> 
 
      <li><a href="#">gfdgdfgfdgfdgfdgfdgdf</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
     <div class="footerset"> 
 
     <h3>gdgdfvfdvfdvf</h3> 
 
     <ul> 
 
      <li><a href="#">vcxvcvxc</a> 
 
      </li> 
 
      <li><a href="#">vxcvcxvcxvcxvcx</a> 
 
      </li> 
 
      <li><a href="#">fdsfdsfds</a> 
 
      </li> 
 
      <li><a href="#">vfdbfdsfd</a> 
 
      </li> 
 
      <li><a href="#">dfsbgsfngfsh</a> 
 
      </li> 
 
      <li><a href="#">bgsfvsd</a> 
 
      </li> 
 
      <li><a href="#">gfdgfdgfds</a> 
 
      </li> 
 
      <li><a href="#">gfdgdfgdfgdfgsd</a> 
 
      </li> 
 
      <li><a href="#">gfdgfdgfdgfdgfdgf</a> 
 
      </li> 
 
      <li><a href="#">gfsgtrghtrgrwgtrr</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
     <div class="footerset"> 
 
     <h3>dfdsfsdfds</h3> 
 
     <ul> 
 
      <li><a href="#">fdsfdsfdsfdsfsd</a> 
 
      </li> 
 
      <li><a href="#">fdsfdsfdsfsd</a> 
 
      </li> 
 
      <li><a href="#">fdsfdsfds</a> 
 
      </li> 
 
      <li><a href="#">fdsfdsfsdfdsfsd</a> 
 
      </li> 
 
      <li><a href="#">fsdfdsfdsfsdfds</a> 
 
      </li> 
 
      <li><a href="#">fsdfdsfdsfds</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
     <div class="footerset"> 
 
     <h3>fdsfdsafdsafsda</h3> 
 
     <ul> 
 
      <li><a href="#">fdsfdsafadsfsda</a> 
 
      </li> 
 
      <li><a href="#">fdsfdsfdsfdsfsdfdsfdsafds</a> 
 
      </li> 
 
      <li><a href="#">fdsfdsafdsfdsa</a> 
 
      </li> 
 
      <li><a href="#">fdsfdsfdsfdsfdadvfdfavree</a> 
 
      </li> 
 
      <li><a href="#">vdafdsafdsafdsaa</a> 
 
      </li> 
 
      <li><a href="#">fdsfdsafdsfdsfdsafdsafds</a> 
 
      </li> 
 
      <li><a href="#">fdsfdsafdsfsdn</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
     <div class="footerset"> 
 
     <h3>fdseneral</h3> 
 
     <ul> 
 
      <li><a href="#">dfadsfdafdsration</a> 
 
      </li> 
 
      <li><a href="#">fdsaountisrvices</a> 
 
      </li> 
 
      <li><a href="#">ssssccsasccounts</a> 
 
      </li> 
 
      <li><a href="#">saompaniescts</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</footer>