0

サーバーによって生成された画像のリストを表示するhtmlページがありますが、画像の下2％を表示したくありません。私の解決策は、画像の包含divでoverflow：hiddenを使用し、display：inline-blockに設定した後、画像に2％のマージントップを与えることでした。これは、私が作成した概念実証ページには最適でしたが、実際のページにはあまり効果がありませんでした。ここに両方の​​ページをアップロードしました。

編集：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>

なぜこれが機能しないのか混乱しているので、ページを検証して（私は決してしません）、チェックアウトしました。

どんな助けでも素晴らしいでしょう。

4

1 に答える 1

2

下の余白を削除したい場合は、負の余白のトリミング手法を使用できます。 

.PreviewCell img
{  
display:inline-block;
width:100%;
height:100%;
margin-bottom: -4%;
}

白い線を削除する場合、最小パーセンテージはブラウザの幅によって異なります。

于 2012-04-13T20:05:40.430 に答える