html - CSS 分为 2 列。没有 或

Question

HTML 看起来像这样，但我不允许对其进行更改。我只能编写 CSS 将其变成 2 列。

<section>
<h2 id="povezave">Povezave</h2>
<nav>
  <a href="http://www.behance.net/">www.behance.net</a>
  <a href="http://www.kiberpipa.org/index.php">www.kiberpipa.org</a>
  <a href="http://www.osalt.com/">www.osalt.com</a>
  <a href="http://videolectures.net/">videolectures.net</a>
  <a href="http://css3button.net/">css3button.net</a>
  <a href="https://developer.mozilla.org/">developer.mozilla.org</a>
  <a href="http://www.w3.org/">www.w3.org</a>
  <a href="http://validator.w3.org/">validator.w3.org</a>
  <a href="http://www.w3schools.com/">www.w3schools.com</a>
  <a href="http://www.sitepoint.com/">www.sitepoint.com</a>
  <a href="http://caniuse.com/#home">caniuse.com</a>
  <a href="http://dribbble.com/">dribbble.com</a>
</nav>

到目前为止，我的 CSS 看起来像这样:

nav{
   position: relative;
   margin:0 auto;
   max-width:250px;
   display:inline-table;
   max-height: 100px;
}
*a{
   clear:left;
   display: inline;
   float: left;
   text-decoration:none;
}*

但这只会使一列由于某种原因超过最大高度

Answer 1

这应该拆分 <nav>分成两列

nav {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;    
    width: 300px;
}