text-align:justify两端对齐布局

最新推荐文章于 2022-10-18 15:44:18 发布

我是新手F1

最新推荐文章于 2022-10-18 15:44:18 发布

阅读量522

点赞数

分类专栏： css 文章标签： justify inline-block 布局

本文链接：https://blog.csdn.net/a409051987/article/details/70053232

版权

css 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

text-align:justify

该属性和值可实现文本两端对齐

<style>
div
{
	border:1px solid black;
}
</style>
</head>
<body>
<h1>CSS text-justify实例</h1>
<div>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</div>
<p>
</body>

<style>
div
{
	border:1px solid black;
	text-align:justify
}
</style>

利用这个特性，结合display：inline-block可以实现两端对齐布局

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>
.box{width:600px; padding:20px; margin:20px auto; background-color:#f0f3f9; text-align:justify;}
.list{width:120px; display:inline-block; padding-bottom:20px; text-align:center; vertical-align:top;}
.justify_fix{display:inline-block; width:100%; height:0; overflow:hidden;}/*使最后一行也可两端对齐*/
</style>
</head>
<body>
<div class="box">
    <span class="list"><img src="http://image.zhangxinxu.com/image/study/s/s128/mm9.jpg" />
哇哦，美女，口水，鼻血~~~</span>
    <span class="list"><img src="http://image.zhangxinxu.com/image/study/s/s128/mm9.jpg" />
哇哦，美女，口水，鼻血，不行了，我的小兔乱撞~~</span>
	<span class="list"><img src="http://image.zhangxinxu.com/image/study/s/s128/mm9.jpg" />
哇哦，美女，口水，鼻血，不行了，我的小兔乱撞~~</span>
	<span class="list"><img src="http://image.zhangxinxu.com/image/study/s/s128/mm9.jpg" />
哇哦，美女，口水，鼻血，不行了，我的小兔乱撞~~</span>
	<span class="list"><img src="http://image.zhangxinxu.com/image/study/s/s128/mm9.jpg" />
哇哦，美女，口水，鼻血，不行了，我的小兔乱撞~~</span>
	<span class="list"><img src="http://image.zhangxinxu.com/image/study/s/s128/mm9.jpg" />
哇哦，美女，口水，鼻血，不行了，我的小兔乱撞~~</span>
	<span class="list"><img src="http://image.zhangxinxu.com/image/study/s/s128/mm9.jpg" />
哇哦，美女，口水，鼻血，不行了，我的小兔乱撞~~</span>
	<span class="list"><img src="http://image.zhangxinxu.com/image/study/s/s128/mm9.jpg" />
哇哦，美女，口水，鼻血，不行了，我的小兔乱撞~~</span>
	<span class="list"><img src="http://image.zhangxinxu.com/image/study/s/s128/mm9.jpg" />
哇哦，美女，口水，鼻血，不行了，我的小兔乱撞~~</span>
	<span class="list"><img src="http://image.zhangxinxu.com/image/study/s/s128/mm9.jpg" />
哇哦，美女，口水，鼻血，不行了，我的小兔乱撞~~</span>
    <span class="justify_fix"></span>
</div>
</body>
</html>

我是新手F1

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
text-align:justify两端对齐布局

text-align:justify该属性和值可实现文本两端对齐div{ border:1px solid black;}CSS text-justify实例In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mi
复制链接

扫一扫

专栏目录