插入每行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()来做一些宽度的事情,但是我不能把它们放在一起。
当你说'有时在右边有一个大的空白空间'你的意思是,如果没有太多的图像,你希望它们变得大于150像素宽,并占据屏幕宽度的百分比?也在哪里gallerybox在HTML? – Baconbeastnz
如果没有多少图片,我想减少图库或图库的宽度。对不起,我忘了在html中添加gallerybox类。它是一个包装。我现在加入 – mk2