乾淨地將複選框放在縮略圖圖像中

在下面的代碼示例中，我希望用複選框覆蓋每個縮略圖圖像。頂部應該沒有空白。「左」和「右」div應該在頂部垂直對齊。乾淨地將複選框放在縮略圖圖像中

我想圖像填充所有表格單元格空間。

<!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谷歌驅動源是不正確的。你可以添加示例圖像來檢查，還可以輸入你想要的輸出的截圖。 –

謝謝你的評論 - 我已經修改了這個問題，以更清晰地添加一個示例圖像。源圖像並不重要，他們只是在那裏進行測試。 – 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。您需要註釋掉</div>和<div>之間的換行符，以擺脫兩張圖片之間的白線 - display: inline-block，瀏覽器在HTML中留出空白空間，所以您必須欺騙它要麼不把下一個標籤放在新的線上，要麼「隱藏」中斷。

小提琴：https://jsfiddle.net/n4yvptr9/5/

來源

2017-08-15 01:45:23

乾淨地將複選框放在縮略圖圖像中

回答

相關問題