将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 white-space属性创建了无限宽度的主容器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/

Answer 2

如果没有列数，这个替代方案怎么样。

＆＃13;

＆＃13;

* {
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
}
#main>li {
    display: inline-block;
    vertical-align: top;
    min-width: 300px;
}
#main h2 {
    font-size: 1em;
    border-bottom: 1px solid black;
}
#main>li>ul {
    width: 100%;
}
#main ul li {
    display: inline-block;
    width: 47%;
    margin: 1%;
    border: 1px solid black;
    border-radius: 5px;
    padding: 5px;
    text-align: center;
}

＆＃13;

<ul id="main">
    <li>
        <h2>Title 1</h2>
        <ul>
            <li>l1</li>
            <li>l2</li>
            <li>l3</li>
            <li>l4</li>
        </ul>
        
    </li>
    <li>
        <h2>Title 2</h2>
        <ul>
            <li>l5</li>
            <li>l6</li>
            <li>l7</li>
            <li>l8</li>
        </ul>
    </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 3

演示代码成功运作

<强> CSS

    .mainContainer-for-features{position:absolute; top:0px; left:0px; right:0px; bottom:0px; background:#000;}
    .mainContainer-for-features header{position:fixed; top:0px; left:0px; right:0px; width:100%; height:45px; padding-top:15px; text-align:center; background:rgba(0,0,0,0.8); color:#fff;}
    #content-display { position:absolute; top:60px; left:0px; right:0px; bottom:0px; background:#fff; white-space:nowrap; overflow:hidden; overflow-x:auto; padding-left:15px;}
    .cols{display:inline-block;}
    .blocks{width:400px; height:150px; background:blue; margin:3px;}

<强> HTML

    <div class="mainContainer-for-features" id="ebooks-mainContainer">
        <header>Simple CSS Grid</header>
        <div id="content-display">
            <div style="display:inline-block; background:#fff; padding:10px;">
                <h1>Title 1</h1><hr/>
                <div class="cols">
                    <div class="blocks"></div>
                    <div class="blocks"></div>
                    <div class="blocks"></div>
                </div>
                <div class="cols">
                    <div class="blocks"></div>
                    <div class="blocks"></div>
                    <div class="blocks"></div>
                </div>
                <div class="cols">
                    <div class="blocks"></div>
                    <div class="blocks"></div>
                    <div class="blocks"></div>
                </div>
                <div class="cols">
                    <div class="blocks"></div>
                    <div class="blocks"></div>
                    <div class="blocks"></div>
                </div>
            </div>
            <div style="display:inline-block; background:#fff; padding:10px;">
                <h1>Title 2</h1><hr/>
                <div class="cols">
                    <div class="blocks"></div>
                    <div class="blocks"></div>
                    <div class="blocks"></div>
                </div>
                <div class="cols">
                    <div class="blocks"></div>
                    <div class="blocks"></div>
                    <div class="blocks"></div>
                </div>
                <div class="cols">
                    <div class="blocks"></div>
                    <div class="blocks"></div>
                    <div class="blocks"></div>
                </div>
                <div class="cols">
                    <div class="blocks"></div>
                    <div class="blocks"></div>
                    <div class="blocks"></div>
                </div>
            </div>
        </div>
    </div>