Question

我希望有一个水平排列的元素（图片）表格，以便元素部分重叠，以节省一些空间。

我试图通过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>

我不明白为什么字体设置正确，但第三个元素没有像我期望的那样向左移动。

谢谢！

Answer 1

这是因为第二个元素向左移动了30px，因此距离第三个元素的距离是30px，然后当你将第三个元素向左移动30px时，它就会关闭你所做的间隙。如果你想移动第3个元素以使第二个元素与第二个元素重叠30px，你需要将它移动60px以赶上它并重叠它。

Answer 2

.table {
  width: 300px;
  table-layout: fixed;
  display: table;
}
.tableel {
  height: 100px;
  width: 100px;
  display: table-cell;
  position: relative;
  vertical-align: middle;
  text-align: center;
}
.row {
  display: table-row;
}
.default .tableel ~ .tableel {
  left: -30px;
}
/* I just moved the second block*/

.scene-1 .tableel:nth-child(2) {
  left: -30px;
}
.scene-2 .tableel:nth-child(2) {
  left: -30px;
}
/* I also moved the third block - but 60pixels. (as 30pixel will move it beside 2nd block*/

.scene-2 .tableel:nth-child(3) {
  left: -60px;
}

<h2>Your code</h2>
<div class="table default">
  <div class="row">
    <div class="tableel" style="background-color: rgba(255,0,0,0.7);">
      reg
    </div>
    <div class="tableel" style="background-color: rgba(0,255,0,0.7);">
      ge
    </div>
    <div class="tableel" style="background-color: rgba(0,0,255,0.7);">
      rg
    </div>
  </div>
</div>
<h2>Scene 1</h2>
<div class="table scene-1">
  <div class="row">
    <div class="tableel" style="background-color: rgba(255,0,0,0.7);">
      reg
    </div>
    <div class="tableel" style="background-color: rgba(0,255,0,0.7);">
      ge
    </div>
    <div class="tableel" style="background-color: rgba(0,0,255,0.7);">
      rg
    </div>
  </div>
</div>
<h2>Scene 2</h2>
<div class="table scene-2">
  <div class="row">
    <div class="tableel" style="background-color: rgba(255,0,0,0.7);">
      reg
    </div>
    <div class="tableel" style="background-color: rgba(0,255,0,0.7);">
      ge
    </div>
    <div class="tableel" style="background-color: rgba(0,0,255,0.7);">
      rg
    </div>
  </div>
</div>

Answer 3

我不明白为什么字体设置正确，但是第三个元素没有移到左边

它正在按照你的意图完全移动。

你无法看到它的原因是因为当第二个div向左移动时，它会在自身和第三个之间产生一个间隙，这个间隙正在填补第三

这个小提琴将帮助您看到这一点：http://jsfiddle.net/abhitalks/byayxob0/

如果你想坚持这样做，那么你必须让最后div向左移动两倍：

div.tableel:last-child { left: -60px !important; }

见这里：http://jsfiddle.net/abhitalks/byayxob0/1/

但是，如果您有div个不确定的数量，这将是一个问题。您必须累积更改left属性，CSS无法为您执行此操作。

也就是说，做一个你想做的更简单的方法就是保持div内联，然后使用负边距来控制重叠。

演示小提琴：http://jsfiddle.net/abhitalks/4gaotuwL/

演示代码段

＆＃13;

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;
}

＆＃13;

<div class="table">
    <div class="row">
        <div class="tableel">reg</div>
        <div class="tableel">ge</div>
        <div class="tableel">rg</div>
    </div>
</div>

＆＃13;

Answer 4

你应该left: -60px;到第三个元素，因为第二个元素是-30px左边。

Answer 5

<强>更新如果你有一个未知数量的div并且想要使这个工作无论你有多少div而不必指定递增左值，那么我建议使用负余量。

只需改变一下：

            div.tableel {
            height : 100px;
            width : 100px;
            display: table-cell;
            position: relative;
        }

To This：

            div.tableel {
            height : 100px;
            width : 100px;
            display: inline-block;
            position: relative;
        }

然后通过替换它来为块提供负余量：

     div.tableel ~ div.tableel 
  {
    left: -30px;
    font-size: 24pt;
  }

到此：

            div.tableel {
            font-size: 24pt;
            opacity: 0.5;
            margin-left: -30px;
        }

所以看看代码和各种答案;

我觉得你很困惑

      div.tableel ~ div.tableel 
  {
      position: relative;
    left: -30px; /* <------------------This */
    font-size: 24pt;
  }

左：-30px部分。

看着你的3个盒子。你有第1,2和3号盒子。根据你的选择器;您正在将框2移动到左侧-30px并将框3向左移动-30px。

当您将第一个框向左移动-30px时;您正在创建第2个框和第3个框30之间的差距：

这意味着Box 3需要-30px才能缩小差距。另外-30px要重叠，所以方框3需要为-60px才能工作：

-30px：

-60px：

所以简而言之..我会替换你的代码部分：

     div.tableel ~ div.tableel 
  {
    left: -30px;
    font-size: 24pt;
  }

这个简化的修复：

   div.tableel{   
    font-size: 24pt;
  }
  div.tableel:nth-child(2){
    left: -30px;
  }
  div.tableel:nth-child(3){
    left: -60px;
  }

这是小提琴：https://jsfiddle.net/8uhnwhwt/

水平放置div以使它们部分重叠

5 个答案: