歡迎來到DIVCSS5查找CSS資料與學習DIV CSS布局技術!

 網頁效果

CSS|div+p實現雙語閱讀并排顯示效果

欲钱买最笨重的动物:CSS

最笨重的动物 www.yyhul.icu .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>")

CSS|div+p實現雙語閱讀并排顯示效果

選中第三列的文本,復制到網頁文檔。

如需轉載,請注明文章出處和來源網址://www.yyhul.icu/wenzhai/h50708.shtml

pt游戏的games 极速5分赛车计划软件下载 大乐透算法 六肖怎样算中奖 龙虎用211211公式压可以吗 动态澳盘新浪竞技风暴 河北时时网站 体彩pk10 25码投资方案 时时彩技巧与攻略 赛车pk10一天开奖图片 七星彩内部9组直码 斗牛明牌抢庄最好牌型 河北时时 12选五技巧 球深比分网即时比分007