首页 新闻 会员 周边

web中大字后跟两行小字，小字自动分两行，怎么处理

0
悬赏园豆：60 [待解决问题]
人

什么

是人

 

差不多类似这样，只是不是表格，且第一个字是大字，大概跟后两行一般高

最好能实现后面输入一长串，然后自动分成两行跟在后面

 

CSS
trirocky的主页 trirocky | 初学一级 | 园豆：126
提问于：2013-09-26 20:05
< >
分享
所有回答(5)
0

<h2>Title</h2>

<span> line0</span><br/>

<span>line1</span>

sinhbv | 园豆：2579 (老鸟四级) | 2013-09-26 20:12

完全不是一回事...

支持(0) 反对(0) trirocky | 园豆：126 (初学一级) | 2013-09-26 20:44
0

<div style="font-size:18pt;float:left">
我
</div>
<div style="font-size:10pt;">
浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。
</div>
<div style="font-size:10pt;">
浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。
</div>
<div style="font-size:10pt;">
浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。
</div>
<div style="font-size:10pt;">
浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。
</div>

Yu | 园豆：12980 (专家六级) | 2013-09-26 21:10

还是不完全啊，如果说想继续再小字后面接大字怎么搞，然后大字后面接小字，都在一行

而且最好能自动分两行，小字直接输入，输出的时候自动变成长度相同的两行，那样排版才好看

具体怎么说，就是竖排版的书的注解形式，只是把他横过来...

支持(0) 反对(0) trirocky | 园豆：126 (初学一级) | 2013-09-27 07:34

@trirocky: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title></title>
</head>
<body>

        <div>
            <div style="border:0px solid #000;font-size:20pt;position:relative;left:0px;top:0px;display:inline;width:100px;">
            我
            <div style="border:0px solid red;font-size:10pt;position:absolute;left:30px;top:0px;height:15px;width:100px;">
            小字小字小字
            </div>
            <div style="border:0px solid red;font-size:10pt;position:absolute;left:30px;top:15px;height:15px;width:100px;">
            小字小字小字
            </div>
            </div>
            <div style="border:0px solid #000;font-size:20pt;position:relative;left:100px;top:0px;display:inline;width:100px;">
            我
            <div style="border:0px solid red;font-size:10pt;position:absolute;left:30px;top:0px;height:15px;width:100px;">
            小字小字小字
            </div>
            <div style="border:0px solid red;font-size:10pt;position:absolute;left:30px;top:15px;height:15px;width:100px;">
            小字小字小字
            </div>
            </div>
            <div style="border:0px solid #000;font-size:20pt;position:relative;left:200px;top:0px;display:inline;width:100px;">
            我
            <div style="border:0px solid red;font-size:10pt;position:absolute;left:30px;top:0px;height:15px;width:100px;">
            小字小字小字
            </div>
            <div style="border:0px solid red;font-size:10pt;position:absolute;left:30px;top:15px;height:15px;width:100px;">
            小字小字小字
            </div>
            </div>
        </div>
        
        <div>
            <div style="border:0px solid #000;font-size:20pt;position:relative;left:0px;top:0px;display:inline;width:100px;">
            我
            <div style="border:0px solid red;font-size:10pt;position:absolute;left:30px;top:0px;height:15px;width:100px;">
            小字小字小字
            </div>
            <div style="border:0px solid red;font-size:10pt;position:absolute;left:30px;top:15px;height:15px;width:100px;">
            小字小字小字
            </div>
            </div>
            <div style="border:0px solid #000;font-size:20pt;position:relative;left:100px;top:0px;display:inline;width:100px;">
            我
            <div style="border:0px solid red;font-size:10pt;position:absolute;left:30px;top:0px;height:15px;width:100px;">
            小字小字小字
            </div>
            <div style="border:0px solid red;font-size:10pt;position:absolute;left:30px;top:15px;height:15px;width:100px;">
            小字小字小字
            </div>
            </div>
            <div style="border:0px solid #000;font-size:20pt;position:relative;left:200px;top:0px;display:inline;width:100px;">
            我
            <div style="border:0px solid red;font-size:10pt;position:absolute;left:30px;top:0px;height:15px;width:100px;">
            小字小字小字
            </div>
            <div style="border:0px solid red;font-size:10pt;position:absolute;left:30px;top:15px;height:15px;width:100px;">
            小字小字小字
            </div>
            </div>
        </div>
        <div>
            <div style="border:0px solid #000;font-size:20pt;position:relative;left:0px;top:0px;display:inline;width:100px;">
            我
            <div style="border:0px solid red;font-size:10pt;position:absolute;left:30px;top:0px;height:15px;width:100px;">
            小字小字小字
            </div>
            <div style="border:0px solid red;font-size:10pt;position:absolute;left:30px;top:15px;height:15px;width:100px;">
            小字小字小字
            </div>
            </div>
            <div style="border:0px solid #000;font-size:20pt;position:relative;left:100px;top:0px;display:inline;width:100px;">
            我
            <div style="border:0px solid red;font-size:10pt;position:absolute;left:30px;top:0px;height:15px;width:100px;">
            小字小字小字
            </div>
            <div style="border:0px solid red;font-size:10pt;position:absolute;left:30px;top:15px;height:15px;width:100px;">
            小字小字小字
            </div>
            </div>
            <div style="border:0px solid #000;font-size:20pt;position:relative;left:200px;top:0px;display:inline;width:100px;">
            我
            <div style="border:0px solid red;font-size:10pt;position:absolute;left:30px;top:0px;height:15px;width:100px;">
            小字小字小字
            </div>
            <div style="border:0px solid red;font-size:10pt;position:absolute;left:30px;top:15px;height:15px;width:100px;">
            小字小字小字
            </div>
            </div>
        </div>
</body>
</html>
支持(0) 反对(0) Yu | 园豆：12980 (专家六级) | 2013-09-27 09:19

@Yu: 抱歉还是感觉不够自然，中间有不自然的间隙...

支持(0) 反对(0) trirocky | 园豆：126 (初学一级) | 2013-09-27 17:58

@trirocky: 

间隙的话 ， 改改参数

width和left

支持(0) 反对(0) Yu | 园豆：12980 (专家六级) | 2013-09-28 08:20
0 
<div style="font-size:210%;float:left;">亲!</div>首字下沉首字下沉首字下沉首字下沉首字下沉首字下沉首字下沉首字下沉首字下沉首字下沉首字下沉首字下沉首字下沉首字下沉首字下沉首字下沉首字下沉首字下沉首字下沉首字下沉首字下沉首字下沉首字下沉首字下沉首字下沉首字下沉首字下沉首字下沉首字下沉首字下沉首字下沉首字下沉首字下沉首字下沉首字下沉首字下沉首字下沉首字下沉首字下沉首字下沉首字下沉首字下沉首字下沉首字下沉首字下沉首字下沉首字下沉首字下沉首字下沉首字下沉首字下沉
Brian_C# | 园豆：211 (菜鸟二级) | 2013-09-27 11:31

效果如图

支持(0) 反对(0) Brian_C# | 园豆：211 (菜鸟二级) | 2013-09-27 11:34

我需要的是能接在后面继续的，不是只有一个大字，而且不分段，直接一行一行很自然的，具体可以看竖排版的书里面的注视，基本就是那样横过来 

支持(0) 反对(0) trirocky | 园豆：126 (初学一级) | 2013-09-27 17:56
0

想多了，头疼，应该用脚本实现~

ifunnyface | 园豆：202 (菜鸟二级) | 2013-10-08 10:36
0

将大字用一个标签包含起来，小字用一个标签包含起来，都设置float:left,   第一个标签设置font-size:2em,第二个1em

三剑客 | 园豆：92 (初学一级) | 2013-12-30 21:37
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。