Question

我要实现基于方格的布局。如下图所示，某些元素必须在此网格内重叠响应。（正方形在x轴上偏移，并在y轴上与一个网格单元重叠。）

http://i.stack.imgur.com/9bZ5G.jpg

有人知道如何实现这种效果吗？我使用框架Foundation 6.我更喜欢没有JavaScript的解决方案。我不能使用基金会。＃ - push-＃和。＃pull- #classes，因为它们会向内移动元素，两个方块必须在不同的行中。

I’ve set up a JSFiddle containing the two squares.

＆＃13;

.square {
  background: #f00;
  position: relative;
}

.square:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.content {
  position: absolute;
  width: 100%;
  height: 100%;
}

.dark {
  background: #cbcbcb;
}

.light {
  background: #dedede;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.0/foundation.css" rel="stylesheet"/>
<div class="row">
  <div class="small-12 columns">
    <div class="row">
      <div class="small-8 columns end">
        <div class="square dark">
          <div class="content">test</div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="small-6 small-offset-6 columns end">
        <div class="square light">
          <div class="content">test</div>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

非常感谢您的帮助。

Answer 1

如果用百分比计算偏移量并且还要考虑列间距，这似乎有效。因此，我调整了片段并添加了另一个有4个列的正方形：

＆＃13;

.square {
  background: #f00;
  position: relative;
}

.square:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.content {
  position: absolute;
  width: 100%;
  height: 100%;
}

.dark {
  background: #cbcbcb;
}

.light {
  background: #dedede;
}

/* NEW */
.small-6.columns.overlap-top > .square {
  margin-top: calc(-33.3% + 1.33*0.625rem); // one third is 33.3% minus 1.33 times col spacing
}

.small-4.columns.overlap-top > .square {
  margin-top: calc(-50% + 1*0.625rem); // one half is 50% minus 1 times col spacing
}

@media screen and (min-width: 40em) {
  .small-6.columns.overlap-top > .square {
   margin-top: calc(-33.3% + 1.33*0.9375rem);
  }

  .small-4.columns.overlap-top > .square {
    margin-top: calc(-50% + 1*0.9375rem);
  }
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.0/foundation.css" rel="stylesheet"/>
<div class="row">
  <div class="small-12 columns">
    <div class="row">
      <div class="small-8 columns end">
        <div class="square dark">
          <div class="content">Square 1</div>
        </div>
      </div>
    </div>
    <div class="row">
      <!-- New class overlap-top -->
      <div class="small-6 small-offset-6 columns overlap-top end">
        <div class="square light">
          <div class="content">Square 2</div>
        </div>
      </div>
    </div>
    <!-- New square -->
    <div class="row">
      <div class="small-4 small-offset-4 columns overlap-top end">
        <div class="square dark">
          <div class="content">Square 3</div>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

JSFiddle：https://jsfiddle.net/jwt0k1pw/1/

希望这有帮助！

Answer 2

我知道这个问题有点旧，但是为了所有这些的好处，现在使用CSS Grid非常容易和干净。拍摄原始问题中张贴的图像，我们定义了一个容器和两个正方形：

<div class="container">
   <div class="content square1">Square 1</div>
   <div class="content square2">Square 2</div>
</div>

然后在CSS中将容器定义为具有6列和6行的CSS Grid。在下面的示例中，我使用repeat() CSS方法让浏览器创建6个相同大小的列和行。

.container {
  display: grid;
  grid-column-template: repeat(6, 1fr);
  grid-row-template: repeat(6, 30px);
  width: 100%;
  height: 600px;
}

然后为您设置左上角位于该网格上的每个项目。您可以使用grid-column-start, grid-column-end, grid-row-start,和grid-row-end的长手属性，但我发现使用短手属性更容易，如下所示：

.square1 {
  grid-column: 1 / 5;
  grid-row: 1 / 5;
  background: #cbcbcb;
}
.square2 {
  grid-column: 4 / 7;
  grid-row: 4 / 7;
  background: #dedede;
}

就展示位置而言，您可以根据您在容器中无形绘制的网格线来指定它。在这种情况下，位置1 / 1是最左上角（如果你正在讨论坐标，那么0,0就是0）。 CSS Grid现在得到了广泛的支持，我相信如果你不想用功能查询硬编码自己，那么有一些JS库会为此创建后备。

这是使用SO Code Snippet runner的完整代码块：

＆＃13;

.container {
  display: grid;
  grid-column-template: repeat(6, 1fr);
  grid-row-template: repeat(6, 30px);
  width: 100%;
  height: 600px;
}
.square1 {
  grid-column: 1 / 5;
  grid-row: 1 / 5;
  background: #cbcbcb;
}
.square2 {
  grid-column: 4 / 7;
  grid-row: 4 / 7;
  background: #dedede;
}

＆＃13;

<div class="container">
   <div class="content square1">Square 1</div>
   <div class="content square2">Square 2</div>
</div>

＆＃13;

方形网格内的重叠元素

2 个答案: