Question

我正在尝试使用CSS创建以下标头：

这是我到目前为止使用CSS网格的尝试：

HTML：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="jumbotron">
    <div class="grid">
      <div class="a">
          28
      </div>
      <div class="b">
         clubs
      </div>
       <div class="c">
         /
      </div>
       <div class="d">
        48
      </div>
       <div class="e">
        virtual
      </div>
      <div class="f">
        gyms
      </div>
</div>

CSS：

.jumbotron {
    background: linear-gradient(141deg, rgb(0,223,179), rgb(34,198,252));
}

.grid {
  display:grid;
  grid-template-columns: 50px 50px 50px 50px;
  color:white;
}

.a{
  grid-column: 1;
  grid-row: 1/span 2;
  font-size:35px;
}

.b{
  grid-column: 2;
  grid-row: 2;
}

.c{
  grid-column: 3;
  grid-row: 1/span 2;
  font-size:35px;
}

.d {
  grid-column: 4;
  grid-row:1/span 2;
  font-size:35px;
}

.e {
  grid-column:5;
  grid-row:1;
}

.f {
  grid-column:5;
  grid-row:2;
}

https://codepen.io/anon/pen/jGKwEL

我不知道我是否过度思考它，但这是我能想出的最好的解决方案，使堆叠的文字有点对齐。然而，使它看起来与图片完全相同并且它包含许多CSS类是非常繁琐的。还有其他方法可以解决这个问题，还是我走在正确的轨道上？

编辑：这就是我最后帮助解决这个问题的答案：https://codepen.io/anon/pen/jGKwEL

Answer 1

您不必使用CSS网格：仅仅因为它可用并不意味着您必须使用它，或者它与您的用例相关。在您的布局要求中，更适合使用display：flex和一些简单的相对定位的混合来获得文本的基线以排列。

首先，使用标记，您只需使用<ul>：

<ul>
  <li>
    <span class="count">28</span>
    <span class="text">clubs</span>
  </li>
  <li>
    <span class="count">48</span>
    <span class="text">virtual<br />gyms</span>
  </li>
</ul>

关于造型：

在display: flex父级上使用<ul>，以便子元素将水平排列
可以使用border-right简单地模拟倾斜的边框，并使用li:last-child选择器
数字旁边的文字/说明的基线对齐需要手动调整，只需使用bottom偏移量的某些值
使用transform: skew(...)统一倾斜文本，而不是依赖斜体。这将导致文本和分隔符:)的统一倾斜。

结果将如下所示：

根据上面列出的建议更改，这是我已经掀起的一个快速概念验证：

＆＃13;

.jumbotron {
  background: linear-gradient(141deg, rgb(0, 223, 179), rgb(34, 198, 252));
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-end;  /* Align to right */
}

ul li {
  transform: skew(-10deg);
  border-right: 3px solid #fff;
  padding: 0 20px;
  display: flex;
  align-items: flex-end; /* Align to bottom */
}

ul li:last-child {
  border: none;
}

ul li span {
  color: white;
  line-height: 1em;
  font-weight: bold;
}

ul li span.count {
  font-size: 45px;
  margin-right: 10px;
}

ul li span.text {
  text-transform: uppercase;
  position: relative;
  bottom: .35em;  /* Adjust this value manually */
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="jumbotron">
  <ul>
    <li>
      <span class="count">28</span>
      <span class="text">clubs</span>
    </li>
    <li>
      <span class="count">48</span>
      <span class="text">virtual<br />gyms</span>
    </li>
    <li>
      <span class="count">33</span>
      <span class="text">active<br />players</span>
    </li>
    <li>
      <span class="count">15</span>
      <span class="text">inactive<br />players</span>
    </li>
  </ul>
</div>

＆＃13;

Answer 2

这是一个使用列表:after来设置斜线样式的示例，以及跨越一个项目的不同部分的示例。您可以复制<li>以添加更多项目，而无需进一步的课程。我希望这是你需要它的方式：）

您可以使用flexbox作为替代方案，但我个人认为在这种情况下不需要它。

https://codepen.io/anon/pen/YrvQMp

带有堆叠文本和不同字体大小的CSS标头

2 个答案: