html - 显示没有表格的两列

Question

我正在尝试在网站上显示脚本和一些歌词。你怎么能显示这样的东西:

不使用表格。有很多，所以我想尽量避免制作多个单元格。还有其他建议吗？如果有帮助的话，我确实有一个 word 文档中的所有内容。

---

有没有办法上传word文档并原样显示，而不必使用分页符和div。我从网站上得到它，Rocky Music看起来没有任何样式。

---

内容被包裹在<pre>中标签，这是 css:

element {
}
pre {
    font-size: 110%;
}
pre {
    overflow: auto;
    position: relative;
    width: 93%;
    padding: 0px 0px 0px 1em;
}
* {
    margin: 0px;
    padding: 0px;
}
body {
    color: #111;
    font: 82%/150% sans-serif;
}

Answer 1

使用有意义的标记

让我们首先考虑我们所代表的内容。

包装器

歌词可以独立于文档，所以article element似乎有用:

The HTML Article Element (<article>) represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable [...]

歌曲标题/章节标题/歌词

• 歌名代表<article>的内容, 它可以包裹在 <h1> 中

• 章节标题 是 <h1> 的副标题, 它们可以包裹在 <h2> 中

• 歌词可以标记为<p> ;为每个 <h2> 标记段落小标题

HTML 完成

我们的文档现在看起来像这样:

<article id="lyrics">
    <h1>Song title</h1>
    <h2>Section</h2>      
    <p>Lyrics</p>
</article>

现在标记既漂亮又有意义，让我们用...来设计它的样式

CSS

• h2向左浮动并清除 float

• p向左浮动

• 多个段落被赋予左边距并用p + p清除 float 。

• 文末清空article:after上的最后一个float属性为clear

• white-space: pre在段落上避免换行的需要。文本将显示为与 HTML 中相同

完整示例

* {
  margin: 0;
}
article {
  margin: 0 auto;
  width: 600px;
  background: #FFF;
  padding: 10px;
}

/*clear the float at the end of the lyrics*/
article:after {
  content: '';
  display: block;
  clear: left;
}
h1 {
  font-size: 1em;
  margin: 0 0 20px;
  margin-left: 100px;
  /*Same as h2 width*/
}
h2,
p {
  float: left;
  font-size: 1em;
  font-weight: normal;
}
h2 {
  clear: left;
  /*Move to new line*/
  width: 100px;
}
p {
  margin: 0 0 20px;
  white-space: pre;
}

/*if there is more than one paragraph after an h2, clear it and give it a margin the same size as the h2 width */
p + p {
  margin-left: 100px;
  clear: left;
}

<article id="lyrics">
    <h1> Wild And Untamed Thing </h1>
  
    <h2>Frank:</h2>
  
    <p>My my my
My my my my my
My my my my
My my
I'm a wild and an untamed thing
I'm a bee with a deadly sting
You get a hit and your mind goes ping
Your heart'll pump and your blood will sing
So let the party and the sounds rock on
We're gonna shake it 'till the life has gone
Rose tint my world
Keep me safe from my trouble and pain</p>


    <h2>Chorus:</h2>
    <p>We're a wild and an untamed thing
We're a bee with a deadly sting
You get a hit and your mind goes ping
Your heart'll pump and your blood will sing
So let the party and the sounds rock on
We're gonna shake it 'till the life has gone
Rose tint my world
Keep me safe from my trouble and pain</p>

    <p>We're a wild and an untamed thing
We're a bee with a deadly sting
You get a hit and your mind goes ping
Your heart'll pump and your blood will sing
So let the party and the sounds rock on
We're gonna shake it 'till the life has gone, gone, gone
Rose tint my world
Keep me safe from my trouble and pain</p>


    <h2>Riff Raff:</h2> 
    <p>Frank-N-Furter, it's all over
Your mission is a failure
Your lifestyle's too extreme
I'm your new commander
You now are my prisoner
We return to Transylvania
Prepare the transit beam</p>
</article>