返回信息流打算实现文字竖排,参考维基百科
代码如下:
.poem.head {
font-size:x-large;
font-weight: bold;
line-height: 1.1em;
}
.poem {
width: 1.5em;
float: right;
line-height: 1.3em;
}
<div class="poem head">从前慢</div>
<div class="poem"><br>木心</div>
<div class="poem"> </div>
<div class="poem">记得早先少年时</div>
<div class="poem"> </div>
<div class="poem">大家诚诚恳恳</div>
<div class="poem">说一句 是一句</div>
<div class="poem"> </div>
<div class="poem">清早上火车站</div>
<div class="poem">长街黑暗无行人</div>
<div class="poem">卖豆浆的小店冒着热气</div>
<div class="poem"> </div>
<div class="poem">从前的日色变得慢</div>
<div class="poem">车<br>,马<br>,邮件都慢</div>
<div class="poem">一生只够爱一个人</div>
<div class="poem"> </div>
<div class="poem">从前的锁也好看</div>
<div class="poem">钥匙精美有样子 </div>
<div class="poem">你锁了 人家就懂</div>
<div class="clear"></div>
但是效果最后变成了这样,不清楚顶部为什么没有对齐:
可点击这儿查看效果,见页面最底部。
这是一条镜像帖。来源:北邮人论坛 / www-technology / #37532同步于 2016/7/4
该镜像源已超过 30 天没有更新,可能在源站已被删除。
WWWTechnology机器人发帖
[已解决]请教一个CSS float 的问题
nullne
2016/7/4镜像同步8 回复
订阅后,新回复会通过你的通知中心匿名送达。
8 条回复
我不太懂嵌套的css 我把这个直接放到css文件中 好像内层的css没有奏效?
我手动添加属性 效果是对的 谢谢
【 在 Richard1024 的大作中提到: 】
: .seven.wide.column{
: font-size: 0;
: .poem{
: ...................
CSS本身不能嵌套,你可以试试CSS的预处理,less,sass,stylus,这些是可以嵌套的
【 在 nullne (nullne) 的大作中提到: 】
: 我不太懂嵌套的css 我把这个直接放到css文件中 好像内层的css没有奏效?
: 我手动添加属性 效果是对的 谢谢
ok 我明白了 已经搞定了
【 在 PiEgg 的大作中提到: 】
: CSS本身不能嵌套,你可以试试CSS的预处理,less,sass,stylus,这些是可以嵌套的
平时用less习惯了,css是不能嵌套的。。。
【 在 nullne 的大作中提到: 】
: 我不太懂嵌套的css 我把这个直接放到css文件中 好像内层的css没有奏效?
: 我手动添加属性 效果是对的 谢谢
要不要试试firefox的实验性属性:writing-mode?
<!DOCTYPE html>
<html>
<head>
<meta charset='utf8' />
<title>豎排文本測試</title>
<style>
body {
writing-mode: vertical-rl;
}
</style>
</head>
<body>
<h1>念奴嬌·赤壁懷古</h1>
<p>大江東去,浪淘盡,千古風流人物。</p>
<p>故壘西邊,人道是,三國周郎赤壁 。</p>
<p>亂石穿空,驚濤拍岸,捲起千堆雪。</p>
<p>江山如畫,一時多少豪傑!</p>
<p>遙想公瑾當年,小喬初嫁了,雄姿英發。</p>
<p>羽扇綸巾,談笑間,檣櫓灰飛煙滅。</p>
<p>故國神遊,多情應笑我,早生華髮。</p>
<p>人生如夢,一樽還酹江月。</p></p>
</body>
</html>
暖神涉猎也太广了吧, 话说这个属性还没有标准化吧
【 在 nuanyangyang 的大作中提到: 】
: 要不要试试firefox的实验性属性:writing-mode?
: [code=html]
: <!DOCTYPE html>
【 在 nullne 的大作中提到: 】
: 暖神涉猎也太广了吧, 话说这个属性还没有标准化吧
嗯,目前还处于candidate recommendation状态,还不是正式的标准。