CSS 如何使我的 div 元素排列完美，以便它们共同构成一个完美的矩形？

Question

虽然我对任何解决方案都持开放态度，但我非常感谢计算表、Bootstrap 和 Flexbox，仅使用 div 元素的纯 CSS 解决方案。

HTML

<div class="sentence-summary">
    <div class="stat bookmarked">
        <i class="fas fa-bookmark"></i>
        <span class="count">999</span>
    </div>
    <div class="stat upvotes">
        <i class="fas fa-thumbs-up"></i>
        <span class="count">999</span>
    </div>
    <div class="stat downvotes">
        <i class="fas fa-thumbs-down"></i>
        <span class="count">999</span>
    </div>
    <div class="main">
        <p>{{ $sentence->body }}</p>
    </div>
</div>

SCSS

.sentence-summary {
  div {
    display: inline-block;
  }
  .stat {
    width: 40px;
    text-align: center;

    span {
      display: block;
      font-size: 10px;
    }

    &.bookmarked {
      background-color: red;
    }
    &.upvotes {
      background-color: blue;
    }
    &.stat.downvotes {
      background-color: pink;
    }
  }
  .main {
    background-color: green;
  }
}

当前结果

想要的结果

Answer 1

我建议为此使用网格布局。您可以指定前三列（统计数据）的宽度应为 40 像素。然后用 '1fr' 表示 'main' 部分应该占用剩余的 space。使用网格意味着高度将保持不变。

您可以使用 'grid-column-gap' 指定每列之间的 space 数量。像这样：

.sentence-summary {
    display: grid;
    grid-template-columns: 40px 40px 40px 1fr;
    column-gap: 5px;
    grid-auto-rows: 40px;
}

确保使用适当的浏览器前缀，因为并非所有浏览器都支持此语法。我一般用this auto-prefixer.

更新： 添加网格自动行：40px；确保您的 'stats' 保持正方形！

CSS 如何使我的 div 元素排列完美，以便它们共同构成一个完美的矩形？

CSS How do I make my div elements lineup perfectly so that collectively they make up a perfect rectangle?

styling