时间戳

首页 > 解决方案 > CSS 如何使我的 div 元素完美排列，以便它们共同构成一个完美的矩形？

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

问题描述

虽然我对任何解决方案持开放态度，包括计数表、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;
  }
}

当前结果 在此处输入图像描述

期望的结果 在此处输入图像描述

标签： styling

解决方案

我建议为此使用网格布局。您可以指定前三列（统计信息）的宽度应为 40 像素。然后使用“1fr”表示“主要”部分应占用剩余空间。使用网格意味着高度将保持不变。

您可以使用“grid-column-gap”来指定每列之间所需的空间量。像这样的东西：

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

确保使用适当的浏览器前缀，因为并非所有浏览器都支持此语法。我通常使用这个自动前缀。

更新：添加网格自动行：40px；确保您的“统计数据”保持不变！

推荐阅读