1

我想创建一个包含多个项目的页面，每个项目都有一个大数字和侧面的一些文字（如底部的“大银行繁荣”）

我找到了两个解决方案。

  • 为每个项目使用带有 CSS 布局的两列

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

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

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

任何人都可以推荐更好的（从源代码角度来看简约）解决方案吗？

4

2 回答 2

1

我会使用来自 HTML5 的新数据属性和带有content. 标记非常少，而且很容易更改。

HTML：

<p data-text="50%">According to some statistician, 50% of all humans...</p>

CSS：

p {
    width: 20em;
    padding-left: 7em;
    position: relative;
}
p::before {
    content: attr(data-text);
    position: absolute;
    top: .25em;
    left: 0;
    font-size: 3em;
}

演示

于 2013-02-03T20:10:41.060 回答
1

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

现在，您可以做的是创建一个 div 标签，例如创建一个 div 标签 - 或者任何其他在语义上更接近它所包含内容的标签 - 并在其中包含两个元素，数字作为跨度，或者实际上，此时的任何内容，你就明白了，把文字当作一个段落。

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

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

div {
   width: 500px;
}

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

这是基本思想。您将 span 元素与内部的数字一起浮动到左侧，以便数字和段落彼此相邻。根据需要增加跨度的字体大小，使用颜色或字体系列使其看起来更好。

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

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

这也确保您的浮动元素不会出现在您的 div 中，如果应用了边框，它会看起来很奇怪。

于 2013-02-03T20:12:24.720 回答