……这个不等宽二栏的架构标签,并不复杂。现简介于下:
所在版块:悟入棋途 发贴时间:2011-03-10 11:13

用户信息
复制本帖HTML代码
高亮: 今天贴 X 昨天贴 X 前天贴 X 
其实只有以下几行(左右尖角括号内的英文)
======================================================================

<div style="width:720px"> (注:外框,设定帖的宽度)

<div style="width:384px; height:2200px; float:left; overflow:scroll;
margin:0 1em; font-size:15px; line-height:160%">

左栏内容,主要是评注,文字可上下滚动。

</div>

<div style="width:256px; float:right; margin:0 1em; font-size:15px;">

右栏内容,在此只放棋图。

</div>

</div> (外框的结束标签)

======================================================================

标签参数说明:

1)overflow:scroll;

  使框内文稿滚动,用于较矮的一栏。必须设定框的高度,才有滚动效果。

2) height:2200px;

  设定框的高度。以上帖为例,右栏六图直排。左栏是长篇注解,把栏高设成与右栏相等。
  一个动态棋盘连上标题、间距的总高度是333px,可以作为计算右栏所需高度的依据;
  再按实际情况细加调整。

3) float: left;

  让框靠左(或靠右)的标签。

4) margin: 0 1em;

  栏框的边距,上下为0;左右各1em。

5) line-height:160%;

  文字的行距。


此外,可在最后添加这行标记:

<div style="clear:both"><br></div>

恢复单栏排版。
.
欢迎来到华新中文网,踊跃发帖是支持我们的最好方法!

 相关帖子 我要回复↙ ↗回到正文
象棋最新战术精华 棋一生   (0 bytes , 706reads )
柳大华“车藏马底”最新布局飞刀虽然失灵,但终力擒吕钦为茅山杯夺冠铺路! 棋一生   (9077 bytes , 299reads )
以往发贴时如标题太长会告知,现在。。。。 棋一生   (124 bytes , 288reads )
up 棋一生   (0 bytes , 223reads )
“金牌教练”梁文斌! 棋一生   (274 bytes , 327reads )
徐天红抛出最新飞刀,柳大华抛最新飞刀反刺! 棋一生   (8520 bytes , 341reads )
... 第五轮   (6974 bytes , 284reads )
学无止境啊! 棋一生   (0 bytes , 225reads )
高山仰止,大象无形,第五轮绝对是高手 卷心菜   (0 bytes , 222reads )
发觉使用系统的Pre既定格式,帖对局记录比较省事。现以一盘精彩短局为例…… 第五轮   (1937 bytes , 235reads )
前帖标题中“帖”应作“贴”。 所用格式与标记如下: 第五轮   (1348 bytes , 190reads )
使用PRE 标记的补充说明…… 第五轮   (1309 bytes , 308reads )
...这是先前 08:23 帖子的显示效果,加上一些说明: 第五轮   (1400 bytes , 260reads )
有点小麻烦!上一帖在firefox以外的浏览器,三栏着法出现绕行现象。现稍加修改如下: 第五轮   (1204 bytes , 255reads )
试试看 几度   (1632 bytes , 257reads )
... 第五轮   (1115 bytes , 230reads )
棋友们,还不快快上华新“悟入棋途”网页! 棋一生   (127 bytes , 250reads )
真好!以后不用打<br>打到手酸! 棋一生   (0 bytes , 420reads )
各人审美观有所不同…… 第五轮   (64 bytes , 281reads )
喜好这东西... P_Mondrain   (46 bytes , 295reads )
这个格式阅读会辛苦吗? 棋一生   (24 bytes , 257reads )
着法在上,图在下,会不会更好?请热烈反馈! 棋一生   (0 bytes , 207reads )
先有字,再有图,原始方法加现代辅助,支持。 SG-Reporter   (22 bytes , 281reads )
你们两位,一位象卓别林,一位象爱因斯坦。 几度   (0 bytes , 238reads )
我是开两个windows,以上下图文分开看,所以图是一行也可以。我这里没问题。 SG-Reporter   (18 bytes , 258reads )
(一)“鬼怪式仙人指路VS卒底炮”:王天一胜赵鑫鑫(梁文斌) 棋一生   (9737 bytes , 639reads )
请注意:在 Firefox, Chrome, Opera, Safari 等浏览器中,显示效果有异状…… 第五轮   (10672 bytes , 293reads )
用此格式显示果然较易阅读,下次将会尝试使用! 棋一生   (0 bytes , 237reads )
……这个不等宽二栏的架构标签,并不复杂。现简介于下: 第五轮   (1085 bytes , 295reads )
不好意思,上一帖中“用于较矮的一栏”句有笔误…… 第五轮   (84 bytes , 249reads )
三图并列终于成功了! 棋一生   (0 bytes , 250reads )
恭喜。 不过三图并列好象有点难阅读。 SG-Reporter   (70 bytes , 221reads )