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-template然后将每个区域分配给具有grid-area属性的子元素。

Codepen 演示

---

标记

<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根据您的喜好添加为常规元素或背景。

---

结果