html - 显示大数字和侧面几个文字的信息图表的最简单方法

Question

我想创建一个包含多个元素的页面，每个元素都有一个大数字和一些侧面的文字(例如 this 底部的“Big bank boom”)

我找到了两个解决方案。

• 为每个元素使用两列 CSS 布局

这个解决方案的问题是，HTML 将有大量的 div(每个包装器一个，两个列。

• 用这个大数字创建一个图像，并将其作为带有侧面文本的一些 div 的背景。

HTML 会简单得多，但在这种情况下，如果我必须更改数字，我将需要一直创建新图像。

谁能推荐更好的(从源代码的 Angular 来看是简约的)解决方案？

Answer 1

在这种情况下使用图像是一个糟糕的解决方案，不仅从开发人员的 Angular 来看，而且因为它给您的文档提供了错误的语义。数字应标记为数字 - 或尽可能接近 - 而不是图像。

现在，您可以做的是创建一个 div 标签，例如 - 或者任何其他在语义上更接近它要包含的内容的标签 - 并在里面有两个元素，数字作为一个跨度，或者实际上，无论什么在这一点上，您得到了想法，并将文本作为段落。

<div>
   <span>45%</span>
   <p>Lorem ipsum dolor amet.</p>
</div>

要使它看起来像您在该信息图中向我们展示的那个很简单，我将向您展示代码并在之后进行解释:

div {
   width: 500px;
}

span {
   display: block;
   float: left;
   width: 40%;
}

这是基本思想。您将 span 元素向左浮动，其中包含数字，以便数字和段落彼此相邻。根据需要增加 span 的字体大小，调整颜色或字体系列以使其看起来更好。

如果更多这些 div 元素将出现在彼此之下，您必须确保它们被正确清除:

div:after {
   clear: both;
   content: '';
   height: 0;
}

这也确保您的 float 元素不会出现在您的 div 之外，从而在应用边框的情况下看起来很奇怪。