Question

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

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

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

无论如何，我的目标是让图像以20％的图像宽度填充整个表格（每行5张图像）。

就像现在一样，无论图像是10％，15％，20％，右边都有差距

我的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
   }

Answer 1

默认情况下，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

用动态图像填充div，没有间隙

1 个答案: