干净地将复选框放在缩略图图像中

在下面的代码示例中，我希望用复选框覆盖每个缩略图图像。顶部应该没有空白。 “左”和“右”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

干净地将复选框放在缩略图图像中

回答

相关问题