插入每行div元素

我试图在我的插入元素（）。我有150px宽度的N个元素，我希望每行插入尽可能多的元素。问题在于人们对于他们的浏览器有不同的尺寸，并且它正在变得混乱。插入每行div元素

有时在右侧有一个很大的空白空间。我想将div空间减少到N * 160（图像的150个+填充10个）+ 10（左填充）

下面是一个代码后面跟着一个小提琴创建的例子。

//HTML 
<div class="gallerybox"> 
    <div class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery"> 

     <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> 
      <div class="myimage"></div> 
     </figure> 
     <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> 
      <div class="myimage"></div> 
     </figure> 
     <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> 
      <div class="myimage"></div> 
     </figure> 
     <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> 
      <div class="myimage"></div> 
     </figure> 
     <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> 
      <div class="myimage"></div> 
     </figure> 
     <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> 
      <div class="myimage"></div> 
     </figure> 
     <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> 
      <div class="myimage"></div> 
     </figure> 
     <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> 
      <div class="myimage"></div> 
     </figure> 
    </div> 
    </div> 


//CSS 
.my-gallery { 
    width: 100%; 
    float: left; 
} 
.myimage { 
    width: 100%; 
    height: 100%; 
    background: black; 
} 
.my-gallery figure { 
    display: inline-block; 
    margin: 0 10px 10px 0; 
    width: 150px; 
    height: 150px; 
} 

.gallerybox { 
    margin: 0 auto ; 
    max-width: 100%; /* MODIFY HERE? */ 
    display: block; 
}

我做了这个fiddle ilustrate我的问题。我相信我必须使用calc()来做一些宽度的事情，但是我不能把它们放在一起。

来源

2016-12-15 mk2

当你说'有时在右边有一个大的空白空间'你的意思是，如果没有太多的图像，你希望它们变得大于150像素宽，并占据屏幕宽度的百分比？也在哪里gallerybox在HTML？ – Baconbeastnz

如果没有多少图片，我想减少图库或图库的宽度。对不起，我忘了在html中添加gallerybox类。它是一个包装。我现在加入 – mk2

你有很多不必要的风格。 e.g .my-gallery和.myimage你有width: 100%这是一个div，它的默认

.gallerybox max-width: 100%; display:block;都是不必要的100％。（显示块是默认div）

因此，因为您想要根据图像数量更改容器的宽度，您需要使用服务器端逻辑，JavaScript逻辑或特殊的CSS选择器（）可能不支持）

在这里做了fiddle。如果图片数量为< 4，则将.gallerybox的宽度设置为50％。其他它跨越全宽。

来源

2016-12-15 03:54:26 Baconbeastnz

你的代码和我的代码有相同的效果 – mk2

插入每行div元素

回答

相关问题