サムネイル画像内にチェックボックスをきれいに配置する

下のコードサンプルでは、各サムネイル画像にチェックボックスを重ねて表示したいと思います。上に白いスペースがないはずです。「左」と「右」のdivは、Topで垂直方向に配置する必要があります。サムネイル画像内にチェックボックスをきれいに配置する

画像をすべての表のセルスペースに塗りたいと思います。

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
<style> 
#container { 
    width: 180px; 
    background-color: #eee; 
    border-size: 0px; 
} 
#left { 
    display: inline; 
    float: left; 
} 
#right { 
    display: inline; 
} 
table { 
    border: 1px solid black; 
    border-collapse:separate; 
    border-spacing: 0; 
    margin: 0 ; 
    } 
td { padding: 0px; } 
</style> 
</head> 
<body> 
<table > 
<tr> 
<td> 
<div id="container" data-role="main"> 
<div id="left" > 
<img src="https://drive.google.com/uc?id=1l0Rwz8GHUGY58lLems8FNyn9UrTFHX4HaA" height="185" width="100%"> 
</div> 
<div id="right"> 
<input type="checkbox" name="vehicle" value="Car" checked> 
</div> 
</div> 
</td> 
<td> 
<div id="container" data-role="main"><!--class="ui-content"--> 
<div id="left"> 
<img src="https://drive.google.com/uc?id=1l0Rwz8GHUGY58lLems8FNyn9UrTFHX4HaA" height="185" width="100%"> 
</div> 
<div id="right"> 
<input type="checkbox" name="vehicle2" value="Car" checked> 
</div> 
</div> 
</td> 
</tr> 
</table> 
</body> 
</html>

各テーブルセルは、この画面の下部のボックスのようになります。

出典

2017-08-11 user1387318

img googleドライブのソースが正しくありません。チェックするサンプルイメージを追加することもできますし、必要な出力のスクリーンショットを追加することもできます。 –

ご意見ありがとうございます。私は質問をより明確にし、サンプル画像も追加しました。ソースイメージはテストのためだけに重要ではありません。 – user1387318

あなたは同じIDを持つ複数の要素を持つことはできません。左、右、コンテナの代わりにクラスを使用する必要があります。

要素の代わりにdisplay: inlineの代わりに、一方を他方の上に置きたい場合は、コンテナにposition: relative、オーバーレイ要素にposition: absoluteを使用する必要があります。

.container { 
    width: 180px; 
    background-color: #eee; 
    border-size: 0px; 
    position: relative; 
} 
.left { 

} 
.right { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
}

フィドル：https://jsfiddle.net/n4yvptr9/3/

あなたがテーブルを取り除くしたい場合は、あなたが.container要素にdisplay: inline-blockを使用することができます。 display: inline-blockで白い線を取り除くには、</div>と<div>の間の改行をコメントアウトする必要があります - display: inline-blockで、ブラウザはHTMLの空白のためのスペースを残します。次のタグを改行したり、改行を隠したりしないでください。

フィドル：https://jsfiddle.net/n4yvptr9/5/

出典

2017-08-15 01:45:23

サムネイル画像内にチェックボックスをきれいに配置する

答えて

関連する問題