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

<!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>

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

智能推荐

运用爬虫做了一个项目:输入一首歌的名字，输出该歌曲的歌词

运行结果：中文歌词英文歌注意：这个项目现在也许一些歌词的输出效果不会很美观。如果大家觉得这个还有什么改进之处，欢迎大家评论。如果觉得这个还行，记得点赞和关注。...

哈哈哈哈，开通后，还是只是简单地记录了两篇SQL学习日记。果然是我任乐的风格。最近重新捡起了一些统计分析方法，网盘资料不全，学习了一周，还得拿起大学记录的笔记，在那里看，算是捡起了一些，学多学少，算是让自己安心一丢丢，让无处安放的心找到地方。 python总是这学习一点那儿学习一点，久久捡起来用一下，没有系统地好好学习。今天就奋起，再从零捡起来一下。能坚持几天呢，哈哈哈哈，任乐任乐。一、安装A...

java实现自动化测试接口访问（一）

一、前置准备： PostMan 访问的网站：Github 访问的接口： https://api.github.com/search/commits?q=committer-date:2017-11-27..2017-12-01&page=1&per_page=100 实现访问：查找2017-11-27到 2017-12-01的100条数据二、代码实现 1. 使用PostMan输入...

SQLite 真的很容易编译 | Linux 中国

事实证明，这个过程超麻烦（如通常一样），但是非常有趣！ -- Julia Evans 上周，我一直在做一个 SQL 网站（https://sql-steps.wizardzines.com/，一个 SQL 示例列表）。我使用 sqlite 运行网站上的所有查询，并且我想在其中一个例子（这个）中使用窗口函数。但是我使用的是 Ubuntu 18.04 中的 sqlite 版本，它太旧了，不支持窗口函...

关于VS2015安装Team Explorer for Microsoft Visual Studio 2015问题总结（已解决）

最近不知道怎么，想使用VS2015查看代码，但是打开VS2015的时候却提醒VS2015软件不完整？我记得自己没有动过VS2015呀！按照以往的经验，自己试了以下方法：一、在控制面板的卸载程序中，点击VS2015的“修复”选项，但是安装到一半就会出现以下问题：我又查看了软件Log，最后关于Team Explorer出现以下日志：二、难道真的是安装包有问题？把VS20...

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

智能推荐

猜你喜欢