作者：秋静222 | 来源：互联网 | 2023-05-22 17:19
我有一个按字母顺序排列的国家/地区列表,例如:
Albania
Andorra
Armenia
Austria
Azerbaijan
Belarus
Belgium
Bosnia and Herzegovina
Bulgaria
Croatia
Cyprus
Czech Republic
Denmark
Estonia
Finland
France
Georgia
Germany
Greece
...
我在列表中显示它们:
- Albania
- Andorra
- Armenia
- Austria
- Azerbaijan
...
该列表在大型显示屏上显示4列:
ul.mylist li {
float: left;
width: 25%;
}
和小显示器上的2:
ul.mylist li {
float: left;
width: 50%;
}
这导致像(大显示)列表:
Albania Andorra Armenia Austria
Azerbaijan Belarus Belgium Bosnia and Herzegovina
Bulgaria Croatia...
好的,现在到了棘手的部分:显示的国家数量可能会因过滤选项而有所不同.我想以另一种方式(从上到下,从左到右)对国家进行排序,如下所示:
Albania Bosnia and Herzegovina Finland [4th col]
Andorra Bulgaria France ...
Armenia Croatia Georgia
Austria Cyprus Germany
Azerbaijan Czech Republic ...
Belarus Denmark
Belgium Estonia
怎么可以记住CSS会将列表折叠到小显示器上的2列？
1> Salman A..：
为此使用CSS3多列布局.浏览器支持有问题,请使用供应商前缀.
ul {
margin: 0;
padding: 0;
}
li {
display: inline-block;
width: 100%;
}
/* default */
ul {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
/* <800px */
@media screen and (max-width: 799px) {
ul {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
}
/* <400px */
@media screen and (max-width: 399px) {
ul {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}
- Albania
- Andorra
- Armenia
- Austria
- Azerbaijan
- Belarus
- Belgium
- Bosnia and Herzegovina
- Bulgaria
- Croatia
- Cyprus
- Czech Republic
- Denmark
- Estonia
- Finland
- France
- Georgia
- Germany
- Greece
京公网安备 11010802041100号