代码如下:
<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中的内容居中...不确定如何获得div左对齐而没有取消其他内容。
我在想这可能是对我的css或者某些jQuery的快速调整,可以在IMG_117
行添加两列。我看到的问题是这是动态内容,我不会总是知道最后一行中有多少......可能是一,二或三,如果有一些jQuery,它需要检查和查看该行中有多少项,然后添加缺少的列。
我不确定哪种方法最简单,或者是否有更好的解决方案......有没有人有任何想法,或者有人能指出我正确的方向吗?
谢谢,
约什
答案 0 :(得分:0)
首先用html中的class =“squares”替换所有id =“squares” 和.squares的#squares
id - 意味着是页面上DOM元素的唯一标识符
然后添加到你的CSS:
.squares {
float: left; /* all elements will tend to left*/
}
.wrapper {
clear: both; /* reset rules of floating for the next elements*/
}
答案 1 :(得分:0)
您可以使用flexbox解决方案获得更流畅,更灵活的布局,请参阅下面的代码集中的解决方案。
.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