Effect display:
1. Fixed number per line: ensure beautiful layout
.list li{ width:20%;display:inline-block; *display:inline;*zoom:1;overflow:hidden; }
2. Adjust the number and size according to the page width: ensure the readability of images and texts
.list li{ width:20%;display:inline-block; *display:inline;*zoom:1;overflow:hidden; }
1. Media query control width
<span style="color: #800000;">@media screen and (max-width:1280px)</span>{<span style="color: #ff0000;"> .list-table1 li{width</span>:<span style="color: #0000ff;">25%</span>}<span style="color: #800000;"> } @media screen and (max-width:600px)</span>{<span style="color: #ff0000;"> .list-table1 li{width</span>:<span style="color: #0000ff;">33.3%</span>}<span style="color: #800000;"> } @media screen and (max-width:400px)</span>{<span style="color: #ff0000;"> .list-table1 li{width</span>:<span style="color: #0000ff;">50%</span>}<span style="color: #800000;"> }</span>
Convenient, but compatibility exists
2. JS control
<span style="color: #800000;">$(window).resize(function () </span>{<span style="color: #ff0000;"> resizeList(); </span>}<span style="color: #800000;">) function resizeList()</span>{<span style="color: #ff0000;"> var s_width=$(window).width(); //console.log("s_width</span>:<span style="color: #0000ff;">"+s_width)</span>;<span style="color: #ff0000;"> if(s_width>600 && s_width <=1280) { $(".list-table1 li").css("width","25%"); </span>}<span style="color: #800000;">else if(s_width>400 && s_width <=600)</span>{<span style="color: #ff0000;"> $(".list-table1 li").css("width","33.3%"); </span>}<span style="color: #800000;">else if(s_width>200 && s_width <=400)</span>{<span style="color: #ff0000;"> $(".list-table1 li").css("width","50%"); </span>}<span style="color: #800000;">else if(s_width<=200)</span>{<span style="color: #ff0000;"> $(".list-table1 li").css("width","100%"); </span>}<span style="color: #800000;"> }</span>
$(window).resize()实时获取浏览器的宽度
Notes:
1. The picture will not be deformed
<span style="color: #800000;">.a-common</span>{<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">auto</span>;<span style="color: #ff0000;">height</span>:<span style="color: #0000ff;">auto</span>;}<span style="color: #800000;"> .a-common img</span>{<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">100%</span>;<span style="color: #ff0000;">height</span>:<span style="color: #0000ff;">auto</span>;}
2. Text overflow processing
<span style="color: #800000;">.title, .subtitle</span>{<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;">auto</span>;<span style="color: #ff0000;">text-align</span>:<span style="color: #0000ff;">center</span>;<span style="color: #ff0000;"> overflow</span>:<span style="color: #0000ff;">hidden</span>;<span style="color: #ff0000;">white-space</span>:<span style="color: #0000ff;">nowrap</span>;<span style="color: #ff0000;"> text-overflow</span>:<span style="color: #0000ff;">ellipsis</span>; }