我根据我在https://allurewebsolutions.com/implement-masonry-isotope-infinite-scroll-imagesloaded-wordpress
找到的教程设置了一个网格基本上,脚本会在网格上排列我的帖子,然后当我点击项目时,我会转到它的固定链接:https://elpasobaseballhalloffame.org/inductees/
该脚本非常灵敏,它可以适应不同的屏幕大小,只显示适合窗口的内容,效果很好。
我想做一个小调整...如何将项目居中,这样如果它只能容纳一个或两个项目,它们不是左对齐的,它们会在页面的中心位置?
html输出如下:
<ul id="grid" style="position: relative; height: 2174px;">
<li style="position: absolute; left: 0px; top: 0px;"><a href="https://elpasobaseballhalloffame.org/inductee/al-silva/"><img width="218" height="300" src="https://elpasobaseballhalloffame.org/wp-content/uploads/al-silva-300x413.jpg" class="attachment-medium size-medium" alt="" srcset="https://elpasobaseballhalloffame.org/wp-content/uploads/al-silva-300x413.jpg 300w, https://elpasobaseballhalloffame.org/wp-content/uploads/al-silva-258x355.jpg 258w, https://elpasobaseballhalloffame.org/wp-content/uploads/al-silva-291x400.jpg 291w, https://elpasobaseballhalloffame.org/wp-content/uploads/al-silva-196x270.jpg 196w, https://elpasobaseballhalloffame.org/wp-content/uploads/al-silva.jpg 317w" sizes="(max-width: 218px) 100vw, 218px"><div class="caption"><h3>Al Silva</h3><p>Inducted in 2000 Started his playing days at the Dan Ponder Little League...<span>Read More </span></p></div></a></li>
<li style="position: absolute; left: 277px; top: 0px;"><a href="https://elpasobaseballhalloffame.org/inductee/alan-zinter/"><img width="300" height="191" src="https://elpasobaseballhalloffame.org/wp-content/uploads/alan-zinter-300x191.jpg" class="attachment-medium size-medium" alt="" srcset="https://elpasobaseballhalloffame.org/wp-content/uploads/alan-zinter-300x191.jpg 300w, https://elpasobaseballhalloffame.org/wp-content/uploads/alan-zinter-258x164.jpg 258w, https://elpasobaseballhalloffame.org/wp-content/uploads/alan-zinter-425x270.jpg 425w, https://elpasobaseballhalloffame.org/wp-content/uploads/alan-zinter.jpg 500w" sizes="(max-width: 300px) 100vw, 300px"><div class="caption"><h3>Alan Zinter</h3><p>Inducted in 2009 Four year letterman for Hanks High School All District and...<span>Read More </span></p></div></a></li>
<li style="position: absolute; left: 554px; top: 0px;"><a href="https://elpasobaseballhalloffame.org/inductee/alberto-mendez/"><img width="198" height="300" src="https://elpasobaseballhalloffame.org/wp-content/uploads/alberto-mendez.jpg" class="attachment-medium size-medium" alt="" srcset="https://elpasobaseballhalloffame.org/wp-content/uploads/alberto-mendez.jpg 258w, https://elpasobaseballhalloffame.org/wp-content/uploads/alberto-mendez-178x270.jpg 178w" sizes="(max-width: 198px) 100vw, 198px"><div class="caption"><h3>Alberto (Beto) Mendez</h3><p>Inducted in Original Hall of Fame Class of 1988 Started playing in the...<span>Read More </span></p></div></a></li>
<li style="position: absolute; left: 831px; top: 0px;"><a href="https://elpasobaseballhalloffame.org/inductee/alex-gutierrez/"><img width="201" height="300" src="https://elpasobaseballhalloffame.org/wp-content/uploads/alex-gutierrez-300x447.jpg" class="attachment-medium size-medium" alt="" srcset="https://elpasobaseballhalloffame.org/wp-content/uploads/alex-gutierrez-300x447.jpg 300w, https://elpasobaseballhalloffame.org/wp-content/uploads/alex-gutierrez-258x384.jpg 258w, https://elpasobaseballhalloffame.org/wp-content/uploads/alex-gutierrez-268x400.jpg 268w, https://elpasobaseballhalloffame.org/wp-content/uploads/alex-gutierrez-181x270.jpg 181w, https://elpasobaseballhalloffame.org/wp-content/uploads/alex-gutierrez.jpg 590w" sizes="(max-width: 201px) 100vw, 201px"><div class="caption"><h3>Alex Gutierrez</h3><p>Inducted in 2006 Alex Gutierrez was the soul of baseball in the Lower...<span>Read More </span></p></div></a></li>
<li style="position: absolute; left: 277px; top: 388px;"><a href="https://elpasobaseballhalloffame.org/inductee/alex-villalobos/"><img width="206" height="300" src="https://elpasobaseballhalloffame.org/wp-content/uploads/alex-villalobos-300x436.jpg" class="attachment-medium size-medium" alt="" srcset="https://elpasobaseballhalloffame.org/wp-content/uploads/alex-villalobos-300x436.jpg 300w, https://elpasobaseballhalloffame.org/wp-content/uploads/alex-villalobos-258x375.jpg 258w, https://elpasobaseballhalloffame.org/wp-content/uploads/alex-villalobos-276x400.jpg 276w, https://elpasobaseballhalloffame.org/wp-content/uploads/alex-villalobos-186x270.jpg 186w, https://elpasobaseballhalloffame.org/wp-content/uploads/alex-villalobos.jpg 321w" sizes="(max-width: 206px) 100vw, 206px"><div class="caption"><h3>Alex Villalobos Jr.</h3><p>Inducted in 1993 Started his baseball career at the age of 16 in...<span>Read More </span></p></div></a></li>
<li style="position: absolute; left: 0px; top: 577px;"><a href="https://elpasobaseballhalloffame.org/inductee/alonso-beltran/"><img width="205" height="300" src="https://elpasobaseballhalloffame.org/wp-content/uploads/alonso-beltran-300x440.jpg" class="attachment-medium size-medium" alt="" srcset="https://elpasobaseballhalloffame.org/wp-content/uploads/alonso-beltran-300x440.jpg 300w, https://elpasobaseballhalloffame.org/wp-content/uploads/alonso-beltran-698x1024.jpg 698w, https://elpasobaseballhalloffame.org/wp-content/uploads/alonso-beltran-258x379.jpg 258w, https://elpasobaseballhalloffame.org/wp-content/uploads/alonso-beltran-272x400.jpg 272w, https://elpasobaseballhalloffame.org/wp-content/uploads/alonso-beltran-184x270.jpg 184w, https://elpasobaseballhalloffame.org/wp-content/uploads/alonso-beltran.jpg 735w" sizes="(max-width: 205px) 100vw, 205px"><div class="caption"><h3>Alonso Beltran</h3><p>Inducted in 2013 1989 and 1990 All District and All City selection for...<span>Read More </span></p></div></a></li>
<li style="position: absolute; left: 831px; top: 606px;"><a href="https://elpasobaseballhalloffame.org/inductee/alton-stelley/"><img width="82" height="300" src="https://elpasobaseballhalloffame.org/wp-content/uploads/alton-stelley-300x1103.jpg" class="attachment-medium size-medium" alt="" srcset="https://elpasobaseballhalloffame.org/wp-content/uploads/alton-stelley-300x1103.jpg 300w, https://elpasobaseballhalloffame.org/wp-content/uploads/alton-stelley-279x1024.jpg 279w, https://elpasobaseballhalloffame.org/wp-content/uploads/alton-stelley-258x948.jpg 258w, https://elpasobaseballhalloffame.org/wp-content/uploads/alton-stelley-109x400.jpg 109w, https://elpasobaseballhalloffame.org/wp-content/uploads/alton-stelley.jpg 360w" sizes="(max-width: 82px) 100vw, 82px"><div class="caption"><h3>Alton Lawrence “Larry” Stelley</h3><p>Inducted in 2009 Leading hitter and pitcher on league champion Big 8 Food...<span>Read More </span></p></div></a></li>
<li style="position: absolute; left: 554px; top: 637px;"><a href="https://elpasobaseballhalloffame.org/inductee/andre-rabouin/"><img width="286" height="300" src="https://elpasobaseballhalloffame.org/wp-content/uploads/andre-rabouin-300x315.png" class="attachment-medium size-medium" alt="" srcset="https://elpasobaseballhalloffame.org/wp-content/uploads/andre-rabouin-300x315.png 300w, https://elpasobaseballhalloffame.org/wp-content/uploads/andre-rabouin-258x271.png 258w, https://elpasobaseballhalloffame.org/wp-content/uploads/andre-rabouin-381x400.png 381w, https://elpasobaseballhalloffame.org/wp-content/uploads/andre-rabouin-257x270.png 257w, https://elpasobaseballhalloffame.org/wp-content/uploads/andre-rabouin-16x16.png 16w, https://elpasobaseballhalloffame.org/wp-content/uploads/andre-rabouin.png 537w" sizes="(max-width: 286px) 100vw, 286px"><div class="caption"><h3>Andre C. Rabouin</h3><p>Inducted in 1998 Born in Bronxville, New York Played baseball at Andress High...<span>Read More </span></p></div></a></li>
<li style="position: absolute; left: 277px; top: 985px;"><a href="https://elpasobaseballhalloffame.org/inductee/andrew-cohen/"><img width="200" height="300" src="https://elpasobaseballhalloffame.org/wp-content/uploads/andrew-cohen.jpg" class="attachment-medium size-medium" alt="" srcset="https://elpasobaseballhalloffame.org/wp-content/uploads/andrew-cohen.jpg 263w, https://elpasobaseballhalloffame.org/wp-content/uploads/andrew-cohen-258x387.jpg 258w, https://elpasobaseballhalloffame.org/wp-content/uploads/andrew-cohen-180x270.jpg 180w" sizes="(max-width: 200px) 100vw, 200px"><div class="caption"><h3>Andrew “Andy” Cohen</h3><p>Inducted in Original Class of El Paso Baseball Hall of Fame in 1988...<span>Read More </span></p></div></a></li>
<li style="position: absolute; left: 554px; top: 1154px;"><a href="https://elpasobaseballhalloffame.org/inductee/andy-morales/"><img width="300" height="191" src="https://elpasobaseballhalloffame.org/wp-content/uploads/img_039-300x191.jpg" class="attachment-medium size-medium" alt="" srcset="https://elpasobaseballhalloffame.org/wp-content/uploads/img_039-300x191.jpg 300w, https://elpasobaseballhalloffame.org/wp-content/uploads/img_039-258x164.jpg 258w, https://elpasobaseballhalloffame.org/wp-content/uploads/img_039-425x270.jpg 425w, https://elpasobaseballhalloffame.org/wp-content/uploads/img_039.jpg 500w" sizes="(max-width: 300px) 100vw, 300px"><div class="caption"><h3>Andy Morales</h3><p>Inducted in 2008 Played baseball four years at Bowie High School under legendary...<span>Read More </span></p></div></a></li>
<li style="position: absolute; left: 0px; top: 1178px;"><a href="https://elpasobaseballhalloffame.org/inductee/armando-sambrano/"><img width="202" height="300" src="https://elpasobaseballhalloffame.org/wp-content/uploads/armando-sambrano-300x445.jpg" class="attachment-medium size-medium" alt="" srcset="https://elpasobaseballhalloffame.org/wp-content/uploads/armando-sambrano-300x445.jpg 300w, https://elpasobaseballhalloffame.org/wp-content/uploads/armando-sambrano-258x383.jpg 258w, https://elpasobaseballhalloffame.org/wp-content/uploads/armando-sambrano-269x400.jpg 269w, https://elpasobaseballhalloffame.org/wp-content/uploads/armando-sambrano-182x270.jpg 182w, https://elpasobaseballhalloffame.org/wp-content/uploads/armando-sambrano.jpg 322w" sizes="(max-width: 202px) 100vw, 202px"><div class="caption"><h3>Armando “Sam” Sambrano</h3><p>Inducted in 1992 Started playing baseball at the age of 12 in 1933...<span>Read More </span></p></div></a></li>
<li style="position: absolute; left: 554px; top: 1565px;"><a href="https://elpasobaseballhalloffame.org/inductee/armando-almanza/"><img width="200" height="300" src="https://elpasobaseballhalloffame.org/wp-content/uploads/armando-almanza-300x451.jpg" class="attachment-medium size-medium" alt="" srcset="https://elpasobaseballhalloffame.org/wp-content/uploads/armando-almanza-300x451.jpg 300w, https://elpasobaseballhalloffame.org/wp-content/uploads/armando-almanza-258x388.jpg 258w, https://elpasobaseballhalloffame.org/wp-content/uploads/armando-almanza-266x400.jpg 266w, https://elpasobaseballhalloffame.org/wp-content/uploads/armando-almanza-180x270.jpg 180w, https://elpasobaseballhalloffame.org/wp-content/uploads/armando-almanza.jpg 500w" sizes="(max-width: 200px) 100vw, 200px"><div class="caption"><h3>Armando Almanza</h3><p>Inducted as part of the 2012 El Paso Baseball Hall of Fame Silver...<span>Read More </span></p></div></a></li>
<div class="nav"><a href="https://elpasobaseballhalloffame.org/inductees/page/2/">Next Page »</a></div>
</ul>
CSS:
ul#grid {
margin: 0 0 0 20px;
padding: 0 !important;
}
#grid li {
list-style-type: none;
margin: 0 10px 30px;
max-width: 257px;
}
#grid img {
height: auto;
width: 257px;
}
#grid .caption {
background: #ccc;
}
#grid h3 {
color: #aa1c29;
font-family: 'Graduate', cursive;
font-size: 25px;
line-height: 30px;
padding: 20px 10px 5px;
text-align: center;
}
#grid p {
color: #054872;
font-size: 18px;
font-weight: 400;
padding: 15px 10px;
}
#grid a {
text-decoration: none;
}
#grid span {
background: #fff;
border-right: 2px solid #cb2020;
color: #cb2020;
display: block;
font-family: "Ionicons", 'Lato', Calibri, Arial, sans-serif;
font-size: 14px;
font-weight: 400;
margin-top: 10px;
padding: 5px 10px 2px;
text-align: right;
text-transform: uppercase;
}
#grid .nav a {
display: none;
}
所有定位都由JS控制,可用:https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.3/imagesloaded.min.js
我创建了一个图形,显示我正在追求的内容:https://ibb.co/nF0Fxc
任何人都知道需要改变什么,以便这些项目集中在页面上?
谢谢,
约什
答案 0 :(得分:0)
所以,
在通过电子邮件发送代码的作者之后,我遵循了他的推荐,并且使我的边距\列表项百分比而不是特定值...这使得网格具有最大的灵活性,同时允许页面很好地扩展。 / p>
我有断点,允许我的列从4更改为3到2,因为边距相应调整,这很有效!
html输出没有改变,它仍然看起来像:
<ul id="grid" style="position: relative; height: 2174px;">
<li style="position: absolute; left: 0px; top: 0px;"><a href="https://elpasobaseballhalloffame.org/inductee/al-silva/"><img width="218" height="300" src="https://elpasobaseballhalloffame.org/wp-content/uploads/al-silva-300x413.jpg" class="attachment-medium size-medium" alt="" srcset="https://elpasobaseballhalloffame.org/wp-content/uploads/al-silva-300x413.jpg 300w, https://elpasobaseballhalloffame.org/wp-content/uploads/al-silva-258x355.jpg 258w, https://elpasobaseballhalloffame.org/wp-content/uploads/al-silva-291x400.jpg 291w, https://elpasobaseballhalloffame.org/wp-content/uploads/al-silva-196x270.jpg 196w, https://elpasobaseballhalloffame.org/wp-content/uploads/al-silva.jpg 317w" sizes="(max-width: 218px) 100vw, 218px"><div class="caption"><h3>Al Silva</h3><p>Inducted in 2000 Started his playing days at the Dan Ponder Little League...<span>Read More </span></p></div></a></li>
<li style="position: absolute; left: 277px; top: 0px;"><a href="https://elpasobaseballhalloffame.org/inductee/alan-zinter/"><img width="300" height="191" src="https://elpasobaseballhalloffame.org/wp-content/uploads/alan-zinter-300x191.jpg" class="attachment-medium size-medium" alt="" srcset="https://elpasobaseballhalloffame.org/wp-content/uploads/alan-zinter-300x191.jpg 300w, https://elpasobaseballhalloffame.org/wp-content/uploads/alan-zinter-258x164.jpg 258w, https://elpasobaseballhalloffame.org/wp-content/uploads/alan-zinter-425x270.jpg 425w, https://elpasobaseballhalloffame.org/wp-content/uploads/alan-zinter.jpg 500w" sizes="(max-width: 300px) 100vw, 300px"><div class="caption"><h3>Alan Zinter</h3><p>Inducted in 2009 Four year letterman for Hanks High School All District and...<span>Read More </span></p></div></a></li>
<li style="position: absolute; left: 554px; top: 0px;"><a href="https://elpasobaseballhalloffame.org/inductee/alberto-mendez/"><img width="198" height="300" src="https://elpasobaseballhalloffame.org/wp-content/uploads/alberto-mendez.jpg" class="attachment-medium size-medium" alt="" srcset="https://elpasobaseballhalloffame.org/wp-content/uploads/alberto-mendez.jpg 258w, https://elpasobaseballhalloffame.org/wp-content/uploads/alberto-mendez-178x270.jpg 178w" sizes="(max-width: 198px) 100vw, 198px"><div class="caption"><h3>Alberto (Beto) Mendez</h3><p>Inducted in Original Hall of Fame Class of 1988 Started playing in the...<span>Read More </span></p></div></a></li>
<li style="position: absolute; left: 831px; top: 0px;"><a href="https://elpasobaseballhalloffame.org/inductee/alex-gutierrez/"><img width="201" height="300" src="https://elpasobaseballhalloffame.org/wp-content/uploads/alex-gutierrez-300x447.jpg" class="attachment-medium size-medium" alt="" srcset="https://elpasobaseballhalloffame.org/wp-content/uploads/alex-gutierrez-300x447.jpg 300w, https://elpasobaseballhalloffame.org/wp-content/uploads/alex-gutierrez-258x384.jpg 258w, https://elpasobaseballhalloffame.org/wp-content/uploads/alex-gutierrez-268x400.jpg 268w, https://elpasobaseballhalloffame.org/wp-content/uploads/alex-gutierrez-181x270.jpg 181w, https://elpasobaseballhalloffame.org/wp-content/uploads/alex-gutierrez.jpg 590w" sizes="(max-width: 201px) 100vw, 201px"><div class="caption"><h3>Alex Gutierrez</h3><p>Inducted in 2006 Alex Gutierrez was the soul of baseball in the Lower...<span>Read More </span></p></div></a></li>
<li style="position: absolute; left: 277px; top: 388px;"><a href="https://elpasobaseballhalloffame.org/inductee/alex-villalobos/"><img width="206" height="300" src="https://elpasobaseballhalloffame.org/wp-content/uploads/alex-villalobos-300x436.jpg" class="attachment-medium size-medium" alt="" srcset="https://elpasobaseballhalloffame.org/wp-content/uploads/alex-villalobos-300x436.jpg 300w, https://elpasobaseballhalloffame.org/wp-content/uploads/alex-villalobos-258x375.jpg 258w, https://elpasobaseballhalloffame.org/wp-content/uploads/alex-villalobos-276x400.jpg 276w, https://elpasobaseballhalloffame.org/wp-content/uploads/alex-villalobos-186x270.jpg 186w, https://elpasobaseballhalloffame.org/wp-content/uploads/alex-villalobos.jpg 321w" sizes="(max-width: 206px) 100vw, 206px"><div class="caption"><h3>Alex Villalobos Jr.</h3><p>Inducted in 1993 Started his baseball career at the age of 16 in...<span>Read More </span></p></div></a></li>
<li style="position: absolute; left: 0px; top: 577px;"><a href="https://elpasobaseballhalloffame.org/inductee/alonso-beltran/"><img width="205" height="300" src="https://elpasobaseballhalloffame.org/wp-content/uploads/alonso-beltran-300x440.jpg" class="attachment-medium size-medium" alt="" srcset="https://elpasobaseballhalloffame.org/wp-content/uploads/alonso-beltran-300x440.jpg 300w, https://elpasobaseballhalloffame.org/wp-content/uploads/alonso-beltran-698x1024.jpg 698w, https://elpasobaseballhalloffame.org/wp-content/uploads/alonso-beltran-258x379.jpg 258w, https://elpasobaseballhalloffame.org/wp-content/uploads/alonso-beltran-272x400.jpg 272w, https://elpasobaseballhalloffame.org/wp-content/uploads/alonso-beltran-184x270.jpg 184w, https://elpasobaseballhalloffame.org/wp-content/uploads/alonso-beltran.jpg 735w" sizes="(max-width: 205px) 100vw, 205px"><div class="caption"><h3>Alonso Beltran</h3><p>Inducted in 2013 1989 and 1990 All District and All City selection for...<span>Read More </span></p></div></a></li>
<li style="position: absolute; left: 831px; top: 606px;"><a href="https://elpasobaseballhalloffame.org/inductee/alton-stelley/"><img width="82" height="300" src="https://elpasobaseballhalloffame.org/wp-content/uploads/alton-stelley-300x1103.jpg" class="attachment-medium size-medium" alt="" srcset="https://elpasobaseballhalloffame.org/wp-content/uploads/alton-stelley-300x1103.jpg 300w, https://elpasobaseballhalloffame.org/wp-content/uploads/alton-stelley-279x1024.jpg 279w, https://elpasobaseballhalloffame.org/wp-content/uploads/alton-stelley-258x948.jpg 258w, https://elpasobaseballhalloffame.org/wp-content/uploads/alton-stelley-109x400.jpg 109w, https://elpasobaseballhalloffame.org/wp-content/uploads/alton-stelley.jpg 360w" sizes="(max-width: 82px) 100vw, 82px"><div class="caption"><h3>Alton Lawrence “Larry” Stelley</h3><p>Inducted in 2009 Leading hitter and pitcher on league champion Big 8 Food...<span>Read More </span></p></div></a></li>
<li style="position: absolute; left: 554px; top: 637px;"><a href="https://elpasobaseballhalloffame.org/inductee/andre-rabouin/"><img width="286" height="300" src="https://elpasobaseballhalloffame.org/wp-content/uploads/andre-rabouin-300x315.png" class="attachment-medium size-medium" alt="" srcset="https://elpasobaseballhalloffame.org/wp-content/uploads/andre-rabouin-300x315.png 300w, https://elpasobaseballhalloffame.org/wp-content/uploads/andre-rabouin-258x271.png 258w, https://elpasobaseballhalloffame.org/wp-content/uploads/andre-rabouin-381x400.png 381w, https://elpasobaseballhalloffame.org/wp-content/uploads/andre-rabouin-257x270.png 257w, https://elpasobaseballhalloffame.org/wp-content/uploads/andre-rabouin-16x16.png 16w, https://elpasobaseballhalloffame.org/wp-content/uploads/andre-rabouin.png 537w" sizes="(max-width: 286px) 100vw, 286px"><div class="caption"><h3>Andre C. Rabouin</h3><p>Inducted in 1998 Born in Bronxville, New York Played baseball at Andress High...<span>Read More </span></p></div></a></li>
<li style="position: absolute; left: 277px; top: 985px;"><a href="https://elpasobaseballhalloffame.org/inductee/andrew-cohen/"><img width="200" height="300" src="https://elpasobaseballhalloffame.org/wp-content/uploads/andrew-cohen.jpg" class="attachment-medium size-medium" alt="" srcset="https://elpasobaseballhalloffame.org/wp-content/uploads/andrew-cohen.jpg 263w, https://elpasobaseballhalloffame.org/wp-content/uploads/andrew-cohen-258x387.jpg 258w, https://elpasobaseballhalloffame.org/wp-content/uploads/andrew-cohen-180x270.jpg 180w" sizes="(max-width: 200px) 100vw, 200px"><div class="caption"><h3>Andrew “Andy” Cohen</h3><p>Inducted in Original Class of El Paso Baseball Hall of Fame in 1988...<span>Read More </span></p></div></a></li>
<li style="position: absolute; left: 554px; top: 1154px;"><a href="https://elpasobaseballhalloffame.org/inductee/andy-morales/"><img width="300" height="191" src="https://elpasobaseballhalloffame.org/wp-content/uploads/img_039-300x191.jpg" class="attachment-medium size-medium" alt="" srcset="https://elpasobaseballhalloffame.org/wp-content/uploads/img_039-300x191.jpg 300w, https://elpasobaseballhalloffame.org/wp-content/uploads/img_039-258x164.jpg 258w, https://elpasobaseballhalloffame.org/wp-content/uploads/img_039-425x270.jpg 425w, https://elpasobaseballhalloffame.org/wp-content/uploads/img_039.jpg 500w" sizes="(max-width: 300px) 100vw, 300px"><div class="caption"><h3>Andy Morales</h3><p>Inducted in 2008 Played baseball four years at Bowie High School under legendary...<span>Read More </span></p></div></a></li>
<li style="position: absolute; left: 0px; top: 1178px;"><a href="https://elpasobaseballhalloffame.org/inductee/armando-sambrano/"><img width="202" height="300" src="https://elpasobaseballhalloffame.org/wp-content/uploads/armando-sambrano-300x445.jpg" class="attachment-medium size-medium" alt="" srcset="https://elpasobaseballhalloffame.org/wp-content/uploads/armando-sambrano-300x445.jpg 300w, https://elpasobaseballhalloffame.org/wp-content/uploads/armando-sambrano-258x383.jpg 258w, https://elpasobaseballhalloffame.org/wp-content/uploads/armando-sambrano-269x400.jpg 269w, https://elpasobaseballhalloffame.org/wp-content/uploads/armando-sambrano-182x270.jpg 182w, https://elpasobaseballhalloffame.org/wp-content/uploads/armando-sambrano.jpg 322w" sizes="(max-width: 202px) 100vw, 202px"><div class="caption"><h3>Armando “Sam” Sambrano</h3><p>Inducted in 1992 Started playing baseball at the age of 12 in 1933...<span>Read More </span></p></div></a></li>
<li style="position: absolute; left: 554px; top: 1565px;"><a href="https://elpasobaseballhalloffame.org/inductee/armando-almanza/"><img width="200" height="300" src="https://elpasobaseballhalloffame.org/wp-content/uploads/armando-almanza-300x451.jpg" class="attachment-medium size-medium" alt="" srcset="https://elpasobaseballhalloffame.org/wp-content/uploads/armando-almanza-300x451.jpg 300w, https://elpasobaseballhalloffame.org/wp-content/uploads/armando-almanza-258x388.jpg 258w, https://elpasobaseballhalloffame.org/wp-content/uploads/armando-almanza-266x400.jpg 266w, https://elpasobaseballhalloffame.org/wp-content/uploads/armando-almanza-180x270.jpg 180w, https://elpasobaseballhalloffame.org/wp-content/uploads/armando-almanza.jpg 500w" sizes="(max-width: 200px) 100vw, 200px"><div class="caption"><h3>Armando Almanza</h3><p>Inducted as part of the 2012 El Paso Baseball Hall of Fame Silver...<span>Read More </span></p></div></a></li>
<div class="nav"><a href="https://elpasobaseballhalloffame.org/inductees/page/2/">Next Page »</a></div>
</ul>
CSS:
/* Grid */
#grid img {
height: auto;
width: 100%;
}
#grid .caption {
background: #ccc;
}
#grid .term {
background-color: #ffffcc;
border-radius: 2px;
display: inline;
margin: 0 2px;
padding: 2px 4px;
}
#grid h3 {
color: #aa1c29;
font-family: 'Graduate', cursive;
font-size: 25px;
line-height: 30px;
margin-bottom: 5px !important;
padding: 20px 10px 5px;
text-align: center;
}
#grid p {
color: #054872;
font-size: 18px;
font-weight: 400;
padding: 15px 10px;
}
#grid a {
text-decoration: none;
}
#grid span {
background: #fff;
border-right: 2px solid #cb2020;
color: #cb2020;
display: block;
font-family: "Ionicons", 'Lato', Calibri, Arial, sans-serif;
font-size: 13px;
font-weight: 400;
margin-top: 10px;
padding: 5px 10px 2px;
text-align: right;
text-transform: uppercase;
}
#grid .nav a {
display: none;
}
/* Media */
@media screen and (max-width: 600px) {
ul#grid {
margin: 0 3%;
padding: 0 !important;
}
#grid li {
list-style-type: none;
margin: 0 3% 30px;
max-width: 44%;
}
}
@media screen and (min-width: 601px) and (max-width: 849px) {
ul#grid {
margin: 0 2%;
padding: 0 !important;
}
#grid li {
list-style-type: none;
margin: 0 2% 30px;
max-width: 29.37%;
}
}
@media screen and (min-width: 850px) {
ul#grid {
margin: 0 1.16%;
padding: 0 !important;
}
#grid li {
list-style-type: none;
margin: 0 1% 30px;
max-width: 23%;
}
#grid a:hover span {
background: #eee;
}
#grid img:hover {
opacity: 0.95;
}
}
所以,我正在做的是调整边距,以便所有内容都适合给定的窗口。边距和列表项的百分比控制着网格,并允许缩放页面而不显示我最初拥有的所有空白区域。这符合我在该网站上使用的图片库的行为,因此对我来说这是一个很好的解决方案。
谢谢,
约什