Html 图像的流体对齐

我正在把我的网站变成一个流动的布局，我完全被一些东西卡住了。我希望图像彼此相邻，当浏览器窗口收缩时，我希望图像随浏览器窗口收缩（%）。这与我设置页面的方式很好，但是！当页面浏览器窗口缩小时，最后一个图像会下降到第一个图像的下方吗？我希望它保持不变，并与行中的其他图像内联收缩。我认为这是一个浮动的东西，但我试图改变周围的浮动，但不能得到想要的效果

我遇到的另一个问题是，在悬停时，我想在图像上加一个1px的边框。我做到这一点没有问题。如果你检查css，你会发现我在div上加了一个1px的白色边框，然后在hover上加了一个彩色边框。这是为了防止图像沿行移动悬停！不确定是否有更好的方法来实现这一点？不管怎么说，问题是在悬停时，边框会出现（实际上会从白色变为红色），但在图像和包含div之间的底部有一个死区？它就像2倍的填充物，但我似乎无法摆脱它？这是你的电话号码

图像对齐
.个人工作{位置：相对；边距：0px自动；宽度：100%；最大宽度：843px；高度：400px；边距顶部：20px；边框：1px实心红色；}
.image land div{宽度：25%；最大宽度：194px；左边距：1%；浮动：左；显示：内联；边框：1px纯白；}
.image land{宽度：100%；显示：内嵌；高度：100%；}
.image land div:hover{border:1px solid#bc2021；}

您的

.image land div

的宽度为25%，即

宽度的25%。个人作品

加上

左边距：1%

。因此，当您计算

占用的空间时，image land div

是

个人工作的26%。即，25%的宽度+1%的左边距+1倍的边框。因此，当您将4
.image land div
相加时，总宽度超过100%。要防止最后一个图像下拉，请按如下所示更改样式

.image-land-div{
    width: 24%; 
    max-width: 194px; 
    margin-left: 1%; 
    float: left; 
    display: inline; 
    border: 1px solid white;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox */   
    box-sizing: border-box;         /* Opera/IE 8+ */
}

要解决第二个问题，即悬停时图像和边框之间的间距，请在图像中添加
垂直对齐
样式。请使用以下样式

.image-land{
    width: 100%; 
    display: inline; 
    height: 100%;
    vertical-align:middle;
}

检查此项
完美！我四处寻找，试图找到解决方案，结果发现使用了
？我将使用您的解决方案，但不知道
是否有效？当我读到超过100%时，我意识到这完全是我的疏忽！我不熟悉流体布局，但我正在学习。我还需要了解-webkit、-moz等，因为我不完全了解它们的功能和使用方法！无论如何，我会谷歌和找到一个教程！詹姆斯，非常感谢你的帮助。您的解决方案非常完美，将为我节省大量时间：）您也可以使用
ul
。祝你学习流体布局好运。干杯…：）
.image-land{
    width: 100%; 
    display: inline; 
    height: 100%;
    vertical-align:middle;
}