歌剧:column-count max-height

I have a problem in Opera 12 when trying to combine column-count with max-height. The problem is that when there is some fixed height Opera generates more columns than specified in column-count instead of adding scroll.

在Opera 12中，当我试图将列数与最大高度结合时，我遇到了一个问题。问题是，当有固定高度时，Opera生成的列比列数中指定的多，而不是添加滚动。

For example, try following html:

例如，尝试遵循html:

<div>
    <ul>
        <li>1</li> <li>2</li> <li>3</li>
        <li>4</li> <li>5</li> <li>6</li>
        <li>7</li> <li>8</li> <li>9</li>
        <li>11</li> <li>12</li> <li>13</li>
        <li>14</li> <li>15</li> <li>16</li>
        <li>17</li> <li>18</li> <li>19</li>
        <li>21</li> <li>22</li> <li>23</li>
        <li>24</li> <li>25</li> <li>26</li>
        <li>27</li> <li>28</li> <li>29</li>
    </ul>
</div>

with following css:

用css:

div
{
    overflow-x: hidden;
    overflow-y: auto;
    column-count: 2; -moz-column-count: 2; -webkit-column-count: 2; 
    max-height: 100px;
}

You can see the result also at http://jsfiddle.net/bYhFg/4/

您也可以在http://jsfiddle.net/bYhFg/4/上看到结果

It works fine in Firefox/Chrome, but not in Opera. In Opera it generates more columns than specified i.e. more than two.

它在Firefox/Chrome上运行良好，但在Opera上就不行了。在Opera中，它生成的列比指定的多，也就是多于两个。

What I'm trying to achieve is to make fixed height div with two columns and vertical scroll when needed.

我想要实现的是在需要的时候用两列和垂直滚动的固定高度div。

1 个解决方案

#1

Try this:

试试这个:

div {
    overflow-x: hidden; 
    overflow-y: auto; 
    max-height: 100px; 
}
ul {
    column-count: 2; -moz-column-count: 2; -webkit-column-count: 2; 
}