html - 之间有空间的盒子(不同的宽度/高度)

Question

我正在尝试为杂志网站构建一个元素，其中第一个元素由具有不同宽度和高度的帖子促销框组成，如下图所示:

• 我正在使用 ZURB 基金会
• 我需要像图片上那样在盒子之间留一个排水沟
• 使用折叠和适当的图像尺寸，我可以获得想要的结果，而且图片之间没有间距。
• 当我手动定义自定义基础排水沟时，左图的高度会发生一些像素的变化

这是我的方法:

<div class="row collapse">

  <div class="column medium-6"><!-- Left Pic 50% width --></div>

  <div class="column medium-6">
  
    <div class="row collapse">

      <div class="column medium-12"><!-- Right Top Pic 50% width, 50% height --></div>

      <div class="column medium-6"><!-- Right Bottom Left Pic 25% width, 50% height --></div>
      
      <div class="column medium-6"><!-- Right Bottom Right Pic 25% width, 50% height --></div>
    
    </div>

  </div>

</div>

Answer 1

对于 Grid layout 来说这似乎是个不错的场景

基本思想是使用 grid-template 创建所需网格的模板。父容器上的属性，然后使用 grid-area 将每个区域分配给子元素属性(property)。

Codepen demo

---

标记

<section class="grid">
  <div class="item first">
    <img src="https://placekitten.com/g/600/500" />
  </div>
  <div class="item second">
        <img src="https://placekitten.com/g/300/150" />
  </div>
  <div class="item third">
        <img src="https://placekitten.com/g/149/100" />
  </div>
  <div class="item fourth">
        <img src="https://placekitten.com/g/149/100" />
  </div>
</section>

CSS

.grid {
   width: 600px;
   height: 250px;
   display: grid;
   grid-column-gap: 3px;
   grid-row-gap: 3px;
   grid-template:
     "first first second second" 1fr  
     "first first second second" 1fr
     "first first second second" 1fr
     "first first third fourth" 1fr
     "first first third fourth" 1fr / 1fr 1fr 1fr 1fr;
}

.grid .first  { grid-area: first;  }
.grid .second { grid-area: second; }
.grid .third  { grid-area: third;  }
.grid .fourth { grid-area: fourth; }

图像可以作为常规添加 img元素或背景，随您喜欢。

---

结果