1

我正在使用 Potomaks Instagram Jquery 脚本来提取特定标签的图像。我将 CSS 设置为自动调整图像大小，以便该行适合整个表格。

表格设置为 100%，图像的主 div 设置为 100%。

但由于某种原因，无论我做什么，最后都会有一个 GAP。我已经彻底检查了代码，没有任何解释。我怀疑它可能与 float:left 或它与 javascript 有关。

不管怎样，我的目标是让图像以 20% 的图像宽度填充整个表格（每行 5 个图像）。

像现在这样，无论图片是10%、15%、20%，右边都有差距

http://postimg.org/image/rkz5zxtfr/

我的html如下：

  <script src="jquery.instagram.js"></script>
 <link rel="stylesheet" href="jgram.css"  type="text/css" />

 <script type="text/javascript">
 $(function(){
 var tokeny= "xxxx";
 var ids= tokeny.substr(0, tokeny.indexOf('.')); 
 var
   insta_container = $(".instagram")
    ,  insta_next_url

  insta_container.instagram({
  hash: 'motorcycles'
, clientId: 'xxxx'
, accessToken: tokeny
, show : 15
, image_size: 'low_resolution'
, onComplete : function (photos, data) {
  insta_next_url = data.pagination.next_url
   }
   })

  $('button').on('click', function(){
   var 
  button = $(this)
   , text = button.text()

    if (button.text() != 'Loading...'){
   button.text('Loading...')
   insta_container.instagram({
      next_url : insta_next_url
    , show : 50
     , image_size: 'low_resolution'
    , onComplete : function(photos, data) {
      insta_next_url = data.pagination.next_url
      button.text(text)
    }
  })
  }        
 }) 
});
</script> 



    <div class="instagram"></div>
   <br>

  <button class="instamore">More</button><br><br>

一切都加载到“instagram”div 中。从那里，图像进入另一个 div “instagram-placeholder”。

这是CSS：

 .instagram {
 width:100%;
 }

 .instagram-placeholder {
 float:left;
 width:15%;
 height:15%;
 }

 .instagram-image {
  width:100%;
  height:100%;
   border-style: none;
  }

  .instamore{
  width: 100%;
   color: #fbfbfb;
  font-style: italic;
  font: 30px Sans-Serif;
  padding: 0px 5px;
  display: inline-block;
  background-color: #3F3F3F;
   border-radius: 2px;
  -o-border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
   border: 1px solid #000000;
   margin-right: 3px;
   margin-top:10px;
   margin-bottom:10px;
  cursor:pointer
   }
4

1 回答 1

3

默认情况下，width不包括border. 所以，你的元素width: 20%和一个 3px 边框实际上是20% + 6px宽的。您可以使用以下方法更改此行为box-sizing：

.instagram-placeholder{
    float:left;
    width:15%;
    height:15%;
    border:3px double #999;

    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

这将使width包含border.

没有该属性，第 5 个图像将换行：

http://jsfiddle.net/dR4Vt/9

有了它，它不会：

http://jsfiddle.net/dR4Vt/8

请注意，这是 IE8+ 并且确实需要 FF 和其他一些早期版本的前缀。 http://caniuse.com/#feat=css3-boxsizing

于 2013-05-24T00:00:59.753 回答