框之间有空格（不同的宽度/高度）

Question

我正在尝试为杂志网站构建一个元素，其中第一个元素由宽度和高度不同的后期宣传框组成，如下图所示：

• 我正在使用ZURB Foundation
• 我需要在图片之间的框之间有一个装订线
• 使用折叠效果和适当的图像尺寸，我可以得到理想的结果，但照片之间没有任何缝隙。
• 当我手动定义自定义基础装订线时，左侧图片的高度会改变一些像素

这是我的方法：

<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属性将每个区域分配给子元素。

  

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元素或背景。

---

结果