垂直流的方式显示一首古诗

最新推荐文章于 2024-03-12 15:26:15 发布

dongsdh

最新推荐文章于 2024-03-12 15:26:15 发布

阅读量450

点赞数 1

分类专栏：有示例图片的小列子

本文链接：https://blog.csdn.net/dongsdh/article/details/104995935

版权

有示例图片的小列子专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<style>
		.box{
			background: #ddd;
			width: 400px;
    		padding-top:10px;
    		box-sizing: border-box;
			text-align: center;
			margin-bottom: 10px;
		}
		.content{
			margin: 0 auto;
    		font-size: 18px;
		}
		.content span{
			display: block;
		    letter-spacing: 7px;
		    margin: 0 9px;
		}
		
		
		.box0 .content{
			writing-mode:vertical-lr;
		}
		.box1 .content{
			writing-mode:vertical-rl;
		}
		/*扩展1*/
		.imgbox{
			width: 150px;
			height: 150px;
			background: #ddd;
			writing-mode:vertical-lr;
			text-align: center;
		}
		.imgbox img{
			margin-top: auto; margin-bottom: auto;
			display: block;
		}
	</style>
</head>
<body>
	
	<h4>垂直流     内容在容器内从左往右显示</h4>
	<div class="box box0">
		<div class="content">
			<span>月下独酌四首·其一</span>
			<span>李白</span>
			<span>花间一壶酒</span>
			<span>独酌无相亲</span>
			<span>举杯邀明月</span>
			<span>对影成三人</span>
		</div>
	</div>
	
	<h4>垂直流     内容在容器内从右往左显示</h4>
	<div class="box box1">
		<div class="content">
			<span>月下独酌四首·其一</span>
			<span>李白</span>
			<span>花间一壶酒</span>
			<span>独酌无相亲</span>
			<span>举杯邀明月</span>
			<span>对影成三人</span>
		</div>
	</div>
	
	
</body>
</html>

dongsdh

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
垂直流的方式显示一首古诗

<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8" /> <style> .box{ background: #ddd; width: 400px; padding-top:10px; box-sizing: bor...
复制链接

扫一扫

专栏目录