我正在嘗試建立我的第一個響應式布局。我想以垂直線顯示列表項，具體取決于寬度。<div style="height:800px;"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> </ul></div>1 52 63 74如果瀏覽器調整大小，我希望它成為1 4 72 53 6有人能幫我嗎？我已經嘗試了幾個小時，卻什么也沒得到。我試過使用表，但我也不能那樣做。
3 回答
皈依舞
TA貢獻1851條經驗 獲得超3個贊
使用CSS3列可以很容易地做到這一點。這是一個示例，HTML：
#limheight {
height: 300px; /*your fixed height*/
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3; /*3 in those rules is just placeholder -- can be anything*/
}
#limheight li {
display: inline-block; /*necessary*/
}
<ul id = "limheight">
<li><a href="">Glee is awesome 1</a></li>
<li><a href="">Glee is awesome 2</a></li>
<li><a href="">Glee is awesome 3</a></li>
<li><a href="">Glee is awesome 4</a></li>
<li><a href="">Glee is awesome 5</a></li>
<li><a href="">Glee is awesome 6</a></li>
<li><a href="">Glee is awesome 7</a></li>
<li><a href="">Glee is awesome 8</a></li>
<li><a href="">Glee is awesome 9</a></li>
<li><a href="">Glee is awesome 10</a></li>
<li><a href="">Glee is awesome 11</a></li>
<li><a href="">Glee is awesome 12</a></li>
<li><a href="">Glee is awesome 13</a></li>
<li><a href="">Glee is awesome 14</a></li>
<li><a href="">Glee is awesome 15</a></li>
<li><a href="">Glee is awesome 16</a></li>
<li><a href="">Glee is awesome 17</a></li>
<li><a href="">Glee is awesome 18</a></li>
<li><a href="">Glee is awesome 19</a></li>
<li><a href="">Glee is awesome 20</a></li>
</ul>
慕蓋茨4494581
TA貢獻1850條經驗 獲得超11個贊
謝謝您提供的SPRBRN示例。它幫助了我。我可以建議我根據上面給出的代碼使用的mixin：
//multi-column-list( fixed columns width)
@mixin multi-column-list($column-width, $column-rule-style) {
-webkit-column-width: $column-width;
-moz-column-width: $column-width;
-o-column-width: $column-width;
-ms-column-width: $column-width;
column-width: $column-width;
-webkit-column-rule-style: $column-rule-style;
-moz-column-rule-style: $column-rule-style;
-o-column-rule-style: $column-rule-style;
-ms-column-rule-style: $column-rule-style;
column-rule-style: $column-rule-style;
}
使用方法：
@include multi-column-list(250px, solid);
- 3 回答
- 0 關注
- 442 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消