4

column-count と max-height を組み合わせようとすると、Opera 12 で問題が発生します。問題は、一定の高さがある場合、Opera がスクロールを追加する代わりに column-count で指定されたよりも多くの列を生成することです。

たとえば、次の 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>

次のCSSを使用：

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

結果はhttp://jsfiddle.net/bYhFg/4/でも確認できます

Firefox/Chrome では正常に動作しますが、Opera では動作しません。Opera では、指定されたよりも多くの列、つまり 2 つを超える列が生成されます。

私が達成しようとしているのは、必要に応じて 2 つの列と垂直スクロールで高さを固定した div を作成することです。

4

1 に答える 1

3

これを試してください：

div {
    overflow-x: hidden; 
    overflow-y: auto; 
    max-height: 100px; 
}
ul {
    column-count: 2; -moz-column-count: 2; -webkit-column-count: 2; 
}
于 2012-06-22T09:13:34.013 に答える