网页效果

CSS

.layout, .layout2{

clear:both;

width:95%;

border:1px dotted #eee;

margin:auto;

margin-bottom:5px;

overflow:hidden;

}

.layout2 .right, .layout2 .left, .layout p{

margin-bottom:-55px;

padding-bottom:55px;

text-align: justify;

margin:0;

padding:0;

margin-left:1%;

margin-right:1%;

}

.layout2 .left, .layout p{

float:left;

width:60%;

font-size:1.0em;

}

.layout2 .right, .layout p+p {

float: left;

width:34%;

border-left:1px dotted #cccccc;

font-size:0.9em;

padding-left:1%;

}

.layout2 .right p, .layout2 .left p, .layout p{

padding-bottom:5px;

}

CSS代码解释

.layout, .layout2{}表示同时定义两个类，类名用逗号“,”分隔；

.layout p{}表示类layout内的子选择符p（段落）；

.layout p+p表示类layout内的子选择符p（段落）后面相邻的选择符p（+表示相邻选择符）；

相邻的两个段落p设置为浮动(float)，即可以实现并排显示的效果。

.layout2这个类的标签内用类.left和.right浮动，在.left和.right内可以放置多个p；

HTML

……

<div class="layout">

<p>"I want you to talk to Mrs. Strickland, " she said. "She's raving about your book. "</p>

<p>“我想让你去同思特里克兰德太太谈一谈，”她说，“她对你的书崇拜得了不得。”</p>

</div>

<div class="layout">

<p>"What does she do?" I asked.</p>

<p>“她是干什么的？”我问。</p>

</div>

<div class="layout">

<p>I was conscious of my ignorance, and if Mrs. Strickland was a well-known writer I thought it as well to ascertain the fact before I spoke to her.</p>

<p>我知道自己孤陋寡闻，如果思特里克兰德是一位名作家，我在同她谈话以前最好还是把情况弄清楚。</p>

</div>

……

借助Excel提高效率

如下图，利用公式组合文本：

=CONCATENATE("<div class='layout'><p>",A1,"</p>","<p>",B1,"</p>","</div>")

选中第三列的文本，复制到网页文档。

－End－