左對齊最後畫廊一行

代碼如下：

<div class="wrapper"> 
    <div id="squares"> 
     <a href="yourlinkhere1.php"><img src="images/galleryimage1.jpg"></a> 
     <h5>IMG_114</h5> 
    </div> 
    <div id="squares"> 
     <a href="yourlinkhere2.php"><img src="images/galleryimage2.jpg"></a> 
     <h5>IMG_115</h5> 
    </div> 
</div>

的CSS是這樣的：

.wrapper { 
    background: #ff0000; 
    text-align: center; 
} 

#squares { 
    background: #00ff00; 
    display: inline-block; 
    vertical-align: top; 
    width: 300px; 
} 

#squares img { 
    max-height: 200px; 
    width: auto; 
} 

#squares h5 { 
    margin: 20px 0; 
}

我喜歡結果如何，但我希望IMG_117在IMG_114之下對齊，同時保持綠色區域居中並且div中的內容居中...... N不要確定如何讓這個div左對齊，而不會將其他東西置中。

我在想這可能是對我的css的快速調整，或者可能是一些jQuery將另外兩列添加到IMG_117行。我看到的問題是這是動態內容，我不會總是知道最後一行有多少...可能是一，二或三，如果有一些jQuery需要檢查並查看有多少項目在行中，然後添加缺少的列。

我不確定哪種方法最簡單，或者如果有更好的解決方案...有沒有人有任何想法或任何人都可以指向正確的方向？

感謝，
喬希

來源

2017-07-29 Josh Rodgers

您可以使用flexbox解決方案來獲得更加流暢和靈活的佈局，請參閱下面的codepen解決方案。

.wrapper { 
    background: #ff0000; 
    text-align: center; 
    width: 100%; 
    height:auto; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-wrap: wrap; 
    flex-wrap: wrap; 
    padding: 0 5% 0; 
}

Codepen

https://codepen.io/ahmedi/pen/KvVgQW

來源

2017-07-29 17:18:02

貢獻我簡直複製並粘貼你的代碼和一切看起來不錯！我甚至沒有想到flex屬性！ –

謝謝！ Josh Rodgers FlexBox是css3的絕佳屬性，您還可以在許多佈局中使用它。 –

首先在HTML 類= 「廣場」和#squares與.squares

ID全部更換ID = 「方塊」 - 意思是唯一標識符頁面上的DOM元素的

然後添加到您的CSS：

.squares { 
    float: left; /* all elements will tend to left*/ 
} 
.wrapper { 
    clear: both; /* reset rules of floating for the next elements*/ 
}

來源

2017-07-29 16:08:52 2oppin

這是非常接近，不幸的是，整個列表（綠色部分）未保持居中......但我很欣賞:-) –

左對齊最後畫廊一行

回答

相關問題