Question

我正在尝试创建一个看起来像

的HTML文档

Some text that spans multiple rows
4    4    4    5     8        4        

but that has some statistical information
3   4    3   4    11          12                      

beneath almost every word
7       6      5     4

我尝试了类似

的内容

<span>Some<br>4</span>
<span>text<br>4</span>...

和

<style>
  table {display:inline}
</style>

...

<table><tr><td>some</td><td>4</td></tr></table>
<table><tr><td>text</td><td>4</td></tr></table>

两者都没有给我预期的结果。

那么，我可以用CSS解决这个问题吗？

Answer 1

这样的事情应该这样做：

<p>
  <span>Foo<span class="stat">3</span></span>
  <span>Bar<span class="stat">3</span></span>
</p>

p {
  line-height: 2em;
}

span {
  position: relative;
}

span.stat {
  position: absolute;
  left: 0;
  top: 1em;
}

这将是相当多的标记... O_O ;;

Answer 2

<table>
<tr><td>some</td><td>text</td></tr>
<tr><td>4</td><td>5</td></tr>
</table>

Answer 3

您可以尝试使用列表：

<ul>
  <li>
    Some<br/>4
  </li>
  <li>
    text<br/>4
  </li>
  ....
</ul>

列表项每个都包含一个单词加下面的数字。长文本将包含几行保持结构。

Answer 4

虽然这个问题已经得到了公认的答案，但可能值得考虑另一种选择。我会事先提出，这不一定是跨浏览器（我不认为IE＆lt; 8会对它做很多事情）兼容。

假设标记为：

<p class="statisticText"><span title="4">Some</span> <span title="5">text</span> <span title="2">with</span> <span title="1">associated</span> <span title="1">information</span>.</p>

以下css应该接近你想要实现的目标：

p.statisticText {line-height: 2em; }

p.statisticText span {position: relative; top: -0.75em; }

p.statisticText span:before {content: attr(title); position: absolute; top: 1em; left: 0; }

我没有尝试按照你的意愿展示它，但是如果你想要一个替代选项，只需要少一点标记（但不要太多）。当然，不要介意考虑限于兼容浏览器的东西......

Answer 5

表格可能是明智的解决方案，并且可以保证所有浏览器都能正确对齐。您需要1）确定一行中您想要多少个单词N（这决定了表格中的列数），2）将要渲染的文本划分为N个单词块，然后3）填充每隔一行中的其他行包含分块文本的表，以及介于两者之间的行与统计信息。

编辑：刚刚看到您的评论想让浏览器控制每行字数。在那种情况下，我认为＆lt; li＆gt; Developer Art的解决方案可能是最好的。

Answer 6

<div class="lefty">Some<br/>4</div>
<div class="lefty">Text<br/>10</div>

.lefty{float:left;}

如何使用CSS在“普通”文本下直接编写其他文本？

6 个答案: