我有一个html页面,显示服务器生成的图像列表,但我不想显示图像的底部2%。我的解决方案是使用overflow:隐藏在图像的包含div上,然后在将其设置为显示后为图像提供2%的margin-top:inline-block。这对于我构建的简单概念验证页面非常有用,但对于实际页面而言并非如此。我上传了两个页面here。
编辑: jsbin页面:
我已尝试使用chrome和IE9,但在任何一个浏览器中都没有运气
这是它不适用的页面的html。
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="./Test_files/ci.css">
</head>
<body>
<div id="StockListTable" class="ListTable">
<div class="PreviewCell"> <img style="border-style:none" alt="Preset 1" src="./Test_files/GetPreviewImage"/></div>
<div class="PreviewCell"> <img style="border-style:none" alt="Preset 2" src="./Test_files/GetPreviewImage(1)"/></div>
<div class="PreviewCell"> <img style="border-style:none" alt="Preset 3" src="./Test_files/GetPreviewImage(2)"/></div>
<div class="PreviewCell"> <img style="border-style:none" alt="Preset 4" src="./Test_files/GetPreviewImage(3)"/></div>
<div class="PreviewCell"> <img style="border-style:none" alt="Preset 5" src="./Test_files/GetPreviewImage(4)"/></div>
<div class="PreviewCell"> <img style="border-style:none" alt="Preset 6" src="./Test_files/GetPreviewImage(5)"/></div>
<div class="PreviewCell"> <img style="border-style:none" alt="Preset 7" src="./Test_files/GetPreviewImage(6)"/></div>
<div class="PreviewCell"> <img style="border-style:none" alt="Preset 8" src="./Test_files/GetPreviewImage(7)"/></div>
<div class="PreviewCell"> <img style="border-style:none" alt="Preset 9" src="./Test_files/GetPreviewImage(8)"/></div>
<div class="PreviewCell"> <img style="border-style:none" alt="Preset 10" src="./Test_files/GetPreviewImage(9)"/></div>
<div class="PreviewCell"> <img style="border-style:none" alt="Preset 11" src="./Test_files/GetPreviewImage(10)"/></div>
<div class="PreviewCell"> <img style="border-style:none" alt="Preset 12" src="./Test_files/GetPreviewImage(11)"/></div>
<div class="PreviewCell"> <img style="border-style:none" alt="Preset 13" src="./Test_files/GetPreviewImage(12)"/></div>
<div class="PreviewCell"> <img style="border-style:none" alt="Preset 14" src="./Test_files/GetPreviewImage(13)"/></div>
<div class="PreviewCell"> <img style="border-style:none" alt="Preset 15" src="./Test_files/GetPreviewImage(14)"/></div>
<div class="PreviewCell"> <img style="border-style:none" alt="Preset 16" src="./Test_files/GetPreviewImage(15)"/></div>
<div class="PreviewCell"> <img style="border-style:none" alt="Preset 17" src="./Test_files/GetPreviewImage(16)"/></div>
<div class="PreviewCell"> <img style="border-style:none" alt="Preset 18" src="./Test_files/GetPreviewImage(17)"/></div>
<div class="PreviewCell"> <img style="border-style:none" alt="Preset 19" src="./Test_files/GetPreviewImage(18)"/></div>
<div class="PreviewCell"> <img style="border-style:none" alt="Preset 20" src="./Test_files/GetPreviewImage(19)"/></div>
</div>
</body>
</html>
和CSS
html
{
margin:0;
padding:0;
width:100%;
}
body
{
margin:0;
padding:0;
font-family:sans-serif;
color:white;
background-color:black;
width:100%;
overflow-x:hidden;
}
.PreviewCell
{
width:12%;
height:20%;
overflow:hidden;
float:left;
padding-left:1px;
padding-right:1px;
}
.ListTable
{
margin:0;
width:104%;
height:86%;
}
.PreviewCell img
{
display:inline-block;
width:100%;
height:100%;
margin-top:2%;
}
它确实将边距添加到图像的顶部,但它不会隐藏溢出,它只会使图像行之间有更多的空间。
这是它适用的页面。
<html>
<head>
<style type="text/css">
.testimage
{
display:inline-block;
width:100%;
height:100%;
margin-top:2%;
}
.container
{
width:12%;
height:20%;
overflow:hidden;
float:left;
padding-left:1px;
padding-right:1px;
}
</style>
</head>
<body bgcolor="#000000">
<div class="container">
<img class="testimage" src="http://192.168.0.76/ImprovCollection/GetPreviewImage?URL=sspci://StockPresets/1&Width=75&Height=76&Color=%23000000" onclick="alert('test');"/>
</div>
<div class="container">
<img class="testimage" src="http://192.168.0.76/ImprovCollection/GetPreviewImage?URL=sspci://StockPresets/1&Width=75&Height=76&Color=%23000000" onclick="alert('test');"/>
</div>
<div class="container">
<img class="testimage" src="http://192.168.0.76/ImprovCollection/GetPreviewImage?URL=sspci://StockPresets/1&Width=75&Height=76&Color=%23000000" onclick="alert('test');"/>
</div>
<div class="container">
<img class="testimage" src="http://192.168.0.76/ImprovCollection/GetPreviewImage?URL=sspci://StockPresets/1&Width=75&Height=76&Color=%23000000" onclick="alert('test');"/>
</div>
</body>
</html>
我很困惑,为什么这不起作用,我甚至验证了页面(我从未做过)并且检查了它。
任何帮助都会很棒。
答案 0 :(得分:2)
如果您想删除底部边距,可以使用negative margin cropping technique.
.PreviewCell img
{
display:inline-block;
width:100%;
height:100%;
margin-bottom: -4%;
}
如果您要删除白线,则最小百分比会因浏览器宽度而异。