html - 将 li 元素分成列 - CSS 设计问题

Question

这是我尝试编写的演示代码。请帮助我...

#mainContainer {
  width: 100%;
  height: 100%;
  white-space: nowrap;
  background: brown;
}
ul {
  list-style: none;
}
#mainContainer > ul {
  column-count: auto;
  -webkit-column-count: auto;
  -moz-column-cont: auto;
  column-width: 300px;
  -webkit-column-width: 300px;
  -moz-column-width: 300px;
  background: yellow;
}
#mainContainer > ul > li {
  display: inline-block;
  height: 50px;
}
#id1 li,
#id2 li {
  background: blue;
  padding: 1%;
  border-radius: 5px;
  width: 300px;
  text-align: center;
  margin: 5px 0px;
}

<div id="mainContainer">
  <ul>
    <li>
      <div id="id1">
        <h2>Title 1</h2>
        <hr/>
        <ul>
          <li>l1</li>
          <li>l2</li>
          <li>l3</li>
          <li>l4</li>
        </ul>
      </div>
    </li>
    <li>
      <div id="id2">
        <h2>Title 2</h2>
        <hr/>
        <ul>
          <li>l5</li>
          <li>l6</li>
          <li>l7</li>
          <li>l8</li>
        </ul>
      </div>
    </li>
  </ul>
</div>

我只想垂直滚动，所以我用 css 空白属性制作了无限宽度的主容器 div。

我想将列表元素划分到适当的列中，如图所示。

Answer 1

修改ul css如下:

#mainContainer > ul {
    column-count:auto;
    -webkit-column-count:auto;
    -moz-column-cont:auto;
    column-width:300px;
    -webkit-column-width:300px;
    -moz-column-width:300px;
    background:yellow;
    white-space:normal; //added
    width:100%;//added
}

演示:http://jsfiddle.net/lotusgodkk/GCu2D/730/