我想要一个水平排列的元素(图片)表，并且元素部分重叠，以节省一些空间。
我试图通过 CSS 解决它。这是我的代码，
<!DOCTYPE html>
<html>
<head>
<style>
div.tableel
{
height : 100px;
width : 100px;
display: table-cell;
position: relative;
}
div.tableel ~ div.tableel
{
left: -30px;
font-size: 24pt;
}
div.row
{
display: table-row;
}
div.table
{
display: table;
}
</style>
</head>
<body>
<div class="table">
<div class="row">
<div class="tableel" style="background-color: red;">
reg
</div>
<div class="tableel" style="background-color: blue;">
ge
</div>
<div class="tableel" style="background-color: yellow;">
rg
</div>
</div>
</div>
</body>
</html>
我不明白的是为什么字体设置正确，但第三个元素没有像我期望的那样向左移动。
谢谢!
最佳答案
What I do not understand is why the font is set correctly, but the third element is not shifted to the left
它正按照您的预期进行移动。
你 看不到它的原因是当第二个 div 向左移动时，它在自己和第三个之间创建了一个间隙，该间隙正在被填充上升了三分之一。
这个 fiddle 将帮助您看到:http://jsfiddle.net/abhitalks/byayxob0/
如果你想坚持这样做，那么你将不得不让最后一个 div 向左移动两倍的量:
div.tableel:last-child { left: -60px !important; }
参见此处:http://jsfiddle.net/abhitalks/byayxob0/1/
但是，如果您的 div 数量不确定，这对您来说就是个问题。您将不得不累积更改 left 属性，这是 CSS 无法为您做的。
也就是说，一个更简单的方法来做你想做的事，就是保持 div 内联，然后使用负边距来控制重叠。
演示 fiddle :http://jsfiddle.net/abhitalks/4gaotuwL/
演示片段:
div.tableel {
height: 100px; width: 100px;
display: inline-block;
}
div.tableel:nth-child(1) { background-color: rgba(255,0,0,0.5); }
div.tableel:nth-child(2) { background-color: rgba(0,0,255,0.5); }
div.tableel:nth-child(3) { background-color: rgba(255,255,0,0.5); }
div.tableel:not(:first-child) {
margin-left: -10px;
}<div class="table">
<div class="row">
<div class="tableel">reg</div>
<div class="tableel">ge</div>
<div class="tableel">rg</div>
</div>
</div>关于html - 水平放置 div，使它们部分重叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33300564/