CSS - 即使行不完整，也可以使圖像具有相同的大小

我想爲導軌應用程序中的圖像製作佈局，而且我在對齊時遇到了問題。CSS - 即使行不完整，也可以使圖像具有相同的大小

HTML

<div class="photos"> 
     <div class="photo-row"> 
      <div class="photo-wrapper"> 
      <a class="fancybox" rel="group" href=""><img class="pending-photo" src="http://blog.blogcatalog.com/wp-content/uploads/mario-300x300.jpg" alt=""></a> 
      </div> 
     <div class="photo-wrapper"> 
      <a class="fancybox" rel="group" href=""><img class="pending-photo" src="http://blog.blogcatalog.com/wp-content/uploads/mario-300x300.jpg" alt=""></a> 
      </div> 
      <div class="photo-wrapper"> 
      <a class="fancybox" rel="group" href=""><img class="pending-photo" src="http://blog.blogcatalog.com/wp-content/uploads/mario-300x300.jpg" alt=""></a> 
      </div> 
     </div> 
     <div class="photo-row"> 
      <div class="photo-wrapper"> 
      <a class="fancybox" rel="group" href=""><img class="pending-photo" src="http://blog.blogcatalog.com/wp-content/uploads/mario-300x300.jpg" alt=""></a> 
      </div> 
      <div class="photo-wrapper"> 
      <a class="fancybox" rel="group" href=""><img class="pending-photo" src="http://blog.blogcatalog.com/wp-content/uploads/mario-300x300.jpg" alt=""></a> 
      </div> 
     </div> 
</div>

CSS

.photos { 
    display: flex; 
    flex-direction: column; 
    border: 10px solid goldenrod; 
} 

.photo-row { 
    border: 5px solid red; 
    display: flex; 

} 

.photo-wrapper { 
    border: 5px solid greenyellow; 
    margin-right: 20px; 
} 
.photo-wrapper:last-child { 
    margin-right: 0; 
} 

.pending-photo { 
    width: 100%; 
}

我想Flexbox的是要做到這一點的最好辦法。我希望圖像調整窗口大小，這就是爲什麼我有寬度：100％。

但我碰到的問題是，當最後一行沒有三個圖像時，它們會稍微改變它們的大小，我想保持圖像的大小相同。我希望所有行中的所有圖像的大小與整行中的圖像大小相同。所有圖片的大小必須始終相同。

我試圖刪除行，只是讓它成爲一個大的柔性箱，但也遇到了對齊問題。

如果您使用instagram查找最後一行圖片未滿的人。這是我想要的功能，但無法弄清楚他們是如何做到的。

的jsfiddle

https://jsfiddle.net/kk7httso/11/

編輯：

其實看起來像我的問題是Flex-box: Align last row to grid重複。我解決了插入空元素填充行的問題，就像第一個答案一樣。

來源

2016-04-25 user4584963

我沒有Instagram的，所以我在這裏失去了一些圖片，但如果你想將圖像均勻調整，爲什麼不是一個簡單的百分比寬度工作？ –

@JosephMarikle我希望所有行的所有圖像尺寸完全相同。當一行只有兩個圖像時，它們比整行圖像大得多，我不知道如何解決這個問題。 – user4584963

你嘗試過使用'flex'屬性（我想'flex：1 auto'）？像這裏：https://jsfiddle.net/koys2ok6/ –

嘗試老CSS

.photo-wrapper { 
    border: 5px solid greenyellow; 
    margin-right: 20px; 

    &:last-child { 
    margin-right: 0px; 
    } 
}

進入新的CSS這

.photo-wrapper { 
    border: 5px solid greenyellow; 
    margin-right: 20px; 
} 
.photo-wrapper:last-child { 
    margin-right: 0; 
}

來源

2016-04-25 13:24:02

謝謝，我會修復一個編輯，但這並不回答主要問題。 – user4584963

你可以設置一個最大寬度上.photo-wrapper

.photo-wrapper { 
    border: 5px solid greenyellow; 
    margin-right: 20px; 
    max-width:calc(33.3333% - 20px); //one third minus the 20px margin 
    box-sizing:border-box; // include the borders in the sizing 
}

https://jsfiddle.net/kk7httso/23/

來源

2016-04-25 13:43:08 Moob

由於Fancybox通過它的JS進行尺寸調整，所以你會很難讓它們完美。

從一些測試中，您可以隨時設置靜態寬度和高度，然後使用媒體查詢更改大小。儘管這並不理想，但它似乎只適用於你所追求的效果。

/* Main image size */ 
    .pending-photo { 
     height:100px; 
     width:100px; 
    } 

/* Mobile image size */ 
    @media (max-width:767px){ 

    .pending-photo { 
     height:75px; 
     width:75px; 
    } 

    }

來源

2016-04-25 13:51:42

你真的需要這個標記嗎？

如果你保持最低限度，那麼它變得非常簡單。不過，如果你想要所有這些邊界，你不需要所有那些divs。

jsFiddle

所有你需要的是

.pending-photo { 
    width: 32%; 
}

來源

2016-04-25 13:58:50

CSS - 即使行不完整，也可以使圖像具有相同的大小

回答

相關問題