为什么 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 {
	width: 33%;
	float: left;
    padding: 16px;
    box-sizing: border-box;
}
footer .footerset:nth-child(4) {
	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>