我试图建立我的第一个响应布局。我想在垂直线中显示列表项,具体取决于宽度。
<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 5 2 6 3 7 4
如果浏览器调整大小,我希望它成为
1 4 7 2 5 3 6
有人可以帮帮我吗?我一直在尝试几个小时,我不能得到任何东西。我试过使用表,但我不能这样做。
非常感谢您的帮助!我非常感谢!
解决方法
这可以使用CSS3列很容易做到。这里有一个例子,HTML:
<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>
CSS:
#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*/ }
和一个小演示:little link。
希望有帮助!
原文地址:https://www.jb51.cc/css/222575.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。