列を使用するときにクロムがすべての幅を使用しないのはなぜですか？

Question

Chromeと列に問題があります。

複数の列に分割されない列に編成されたタイトル付きのリンクセットが必要です。

私はこれをファイアフォックス、すなわちサファリで達成することができましたが、クロムはボールを弾いていません。

表示の場合：インラインブロックが削除されている場合は、すべてが乱雑に見える場合を除きほとんど機能しません。

助けを歓迎します。 そのようにそれをしないのはなぜ

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>