[英]CSS float: left causing unnecessary whitespace with varying height
This is a problem with a live website, the page I'm talking about is this . 这是一个实时网站的问题,我正在谈论的页面就是这个 。
Basically I have some PHP which echos out images from my db wrapped in divs, like this, for example, for each image: 基本上我有一些PHP回复我的数据包中包含div的图像,例如,对于每个图像:
<div class='gall_div'>
<a href='img_gallery/CD cover Bach 2.jpg' class='lightbox'>
<img class='galleryImage' title='(tooltip)' src='someimg.jpg'>
</a></div>
I want my images to wrap to the left, the CSS looks like this: 我希望我的图像包裹在左边,CSS看起来像这样:
div.gall_div {
float:left;
margin-right:120px;
padding-bottom:10px;
padding-top:10px;
width: 100px;
}
Notice, if you try resizing the page, unnecessary whitespace appears to the left of the second/third row of images. 请注意,如果您尝试调整页面大小,则第二行/第三行图像左侧会出现不必要的空格。 I believe this is due to varying image height. 我相信这是由于图像高度的变化。 How can I correct this? 我怎么能纠正这个?
I'd say that the best solution here would be to change your CSS slightly, to declare them as inline-block
elements, and have the text-align set to the left: 我想这里最好的解决方案是稍微改变你的CSS,将它们声明为inline-block
元素,并将text-align设置为左边:
div.gall_div {
display:inline-block;
margin-right:120px;
padding-bottom:10px;
padding-top:10px;
text-align:left;
width: 100px;
}
Additionally, this allows you to set vertical-align: middle;
此外,这允许您设置vertical-align: middle;
so that they can be vertically centered, if need be. 这样,如果需要,它们可以垂直居中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.