左对齐最后画廊一行

代码如下：

<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

这是非常接近，不幸的是，整个列表（绿色部分）未保持居中......但我很欣赏:-) –

左对齐最后画廊一行

回答

相关问题