Question

我需要使用由5列和n行组成的html / css（可能还有javascript）来制作统一网格。大多数网格将由统一缩略图拍摄。但是，在第二行我想放置一个谷歌adsense广告，占用5列和2行。这是should look like的图像。（抱歉没有足够的声誉直接发布图片。）

以下是我目前的代码：

<html>
  <head>
    <style type="text/css">
      li {
        list-style-type: none;
        display: list-item;
        float: left;
        padding-left: 10px;
        padding-top: 10px;
      }
    </style>
  </head>
  <body>
    <ul>
      <li><a href="#"><img src="http://placekitten.com/187/133" /></a></li>
      <li><a href="#"><img src="http://placekitten.com/187/133" /></a></li>
      <li><a href="#"><img src="http://placekitten.com/187/133" /></a></li>
      <li><a href="#"><img src="http://placekitten.com/187/133" /></a></li>
      <li><a href="#"><img src="http://placekitten.com/187/133" /></a></li>
      <li><a href="#"><img src="http://placekitten.com/187/133" /></a></li>
      <li><a href="#"><img src="http://placekitten.com/187/133" /></a></li>
      <li><a href="#"><img src="http://placekitten.com/187/133" /></a></li>
      <li><a href="#"><img src="http://placekitten.com/187/133" /></a></li>
      <li class="bigger-thing"><!--- ad here --></li>
      <li><a href="#"><img src="http://placekitten.com/187/133" /></a></li>
      <li><a href="#"><img src="http://placekitten.com/187/133" /></a></li>
      <li><a href="#"><img src="http://placekitten.com/187/133" /></a></li>
      <li><a href="#"><img src="http://placekitten.com/187/133" /></a></li>
      <li><a href="#"><img src="http://placekitten.com/187/133" /></a></li>
      <li><a href="#"><img src="http://placekitten.com/187/133" /></a></li>
      <li><a href="#"><img src="http://placekitten.com/187/133" /></a></li>
      <li><a href="#"><img src="http://placekitten.com/187/133" /></a></li>
      <li><a href="#"><img src="http://placekitten.com/187/133" /></a></li>
      <li><a href="#"><img src="http://placekitten.com/187/133" /></a></li>
      <li><a href="#"><img src="http://placekitten.com/187/133" /></a></li>
      <li><a href="#"><img src="http://placekitten.com/187/133" /></a></li>
      <li><a href="#"><img src="http://placekitten.com/187/133" /></a></li>
      <li><a href="#"><img src="http://placekitten.com/187/133" /></a></li>
      <li><a href="#"><img src="http://placekitten.com/187/133" /></a></li>
      <li><a href="#"><img src="http://placekitten.com/187/133" /></a></li>
      <li><a href="#"><img src="http://placekitten.com/187/133" /></a></li>
      <li><a href="#"><img src="http://placekitten.com/187/133" /></a></li>
    </ul>
  </body>
</html>

我可以用纯css做到这一点吗？如果是这样的话？如果不是，你会用javascript怎么做？

网格内的谷歌广告

0 个答案: