插入每行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元素

回答

相關問題