显示没有表的两列

时间：2015-05-07 21:28:12

标签： html css

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

screenshot

不使用表格。有很多，所以我想尽量避免制作多个细胞。还有其他建议吗？如果有帮助，我确实拥有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;
}

3 个答案:

答案 0 :(得分：2)

使用有意义的标记

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

包装器

歌词可以独立于文档中播放，因此article element似乎很有用：

  

HTML文章元素（<article>）表示文档，页面，应用程序或网站中的自包含组合，旨在可独立分发或可重复使用 [.. ]

歌曲标题/部分标题/歌词

  • 歌曲标题代表<article>的内容，可以包含在<h1>

    • 中

  • 部分标题是<h1>的子标题，可以包含在<h2>

    • 中

  • 歌词可以用<p>标记;标记每个<h2>子标题的段落

HTML完成

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

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

现在标记很好而且很有意义，让我们用它来设计它......

CSS

  • h2浮动到左侧并清除浮动

  • p浮动到左侧

  • 多个段落左边距并使用p + p

    • 清除浮动

  • 文章的结尾用article:after上的clear属性清除最后一个浮动

  • 段落上的white-space: pre可以防止换行。文本将与HTML

    • 中显示的内容相同

完整示例

＆＃13;
＆＃13; 
* {
  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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

您可以使用float属性来实现。 html会像这样松散：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <!--<script src="app1.js"></script> -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>

</head>

<body> 
  <div id="placeholder1"></div>
  <div id="placeholder2"></div>
  <script>
    var data={
      "firstName":"Ray",
      "lastName":"Villalobos",
      "joined":2012
    };

    var data1={
      "firstName":"John",
      "lastName":"Doe",
      "joined":2013
    };
    document.getElementById("placeholder1").innerHTML=data.firstName+" "+data.lastName+" "+data.joined;
    document.getElementById("placeholder2").innerHTML=data1.firstName+" "+data1.lastName+" "+data1.joined;
  </script>

</body>
</html>

这就是CSS 

<div class="leftcol">
    <p>Asdfkjbwjwn</p>
</div>
<div class="rightcol">
    <p>asdjbebwkwosn</p>
</div>
<div class="cl"></div>

注意： HTML末尾的“cl”div，它将“重置”下一个节点的位置。

答案 2 :(得分：0)

试试这个：

.clearfix:after {
  content: "";
  clear: both;
  display: block;
  }

.leftcol {
  float: left;
  width: 35%;
  box-sizing: border-box;
  }
.rightcol {
  float: right;
  width: 65%;
  box-sizing: border-box;
  }
<section class="clearfix">
  <div class="leftcol">Lorem...</div>
  <div class="rightcol">Lorem ipsum dolor sit amet...</div>
</section>
<section>
  <div class="leftcol">Lorem...</div>
  <div class="rightcol">Lorem ipsum dolor sit amet...</div>
</section>
<section>
  <div class="leftcol">Lorem...</div>
  <div class="rightcol">Lorem ipsum dolor sit amet...</div>
</section>

这对我来说很好，你也应该能够做到这一点。

相关问题
最新问题