两端对齐布局与text-align:justify
百分比实现
首先最简单的是使用百分比实现，如下一个展示列表：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style type="text/css">
7 .list{
8 width: 100%;
9 background: #f0f0f9;
10 list-style: none;
11 font-size: 0; /* 去掉边框的影响 */
12 }
13 .img{
14 display: inline-block;
15 width: 30%;
16 height: 60px;
17 margin-right: 5%;
18 border: 1px solid lightblue;
19 box-sizing: border-box; /* 削去border边框宽度的影响 */
20 text-align: center;
21 }
22 </style>
23 </head>
24 <body>
25 <div class="box">
26 <ul class="list">
27 <li class="img"><img src="img/HBuilder.png" alt="" /></li>
28 <li class="img"><img src="img/HBuilder.png" alt="" /></li>
29 <li class="img" style="margin-right: 0;"><img src="img/HBuilder.png" alt="" /></li>
30 </ul>
31 </div>
32 </body>
33 </html>效果：
这样当然很简单，而且也不会存在什么兼容性问题，但是其他问题还有很多：
定宽的列表，效果很难实现
如果内部img元素宽度不是100%且需要实现两端对齐，效果很难实现
如果列表项数量是动态的，效果不能实现
flex实现
第二种实现方式就比较先进了，除了需要学习flex相关知识，使用还是很简单的，实现两端对齐效果，关键点是在flex容器上使用justify-content属性，并将其值设为space-between;
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style type="text/css">
7 .list{
8 display: -moz-box;
9 display: -webkit-box;
10 display: -webkit-flex;
11 display: -moz-flex;
12 display: -ms-flexbox;
13 display: -ms-flex;
14 display: flex;
15 -webkit-box-pack: justify;
16 -moz-box-pack: justify;
17 -ms-flex-pack: justify;
18 -webkit-justify-content: space-between;
19 -moz-justify-content: space-between;
20 -ms-justify-content: space-between;
21 justify-content: space-between; display: flex;
22 justify-content: space-between;
23 }
24 .img{
25 display: block;
26 }
27 </style>
28 </head>
29 <body>
30 <div class="box">
31 <ul class="list">
32 <li class="img"><img src="img/HBuilder.png" alt="" /></li>
33 <li class="img"><img src="img/HBuilder.png" alt="" /></li>
34 <li class="img" style="margin-right: 0;"><img src="img/HBuilder.png" alt="" /></li>
35 </ul>
36 </div>
37 </body>
38 </html>text-align:justify实现
另外一种要介绍的是使用text-align:justyle;实现方式。
我们知道text-align:justify;效果是实现文字两端对齐,如。
转载于:https://www.cnblogs.com/h5monkey/p/5937423.html
两端对齐布局与text-align:justify相关推荐
- chrome css两端对齐,两端对齐布局与text-align:justify
百分比实现 首先最简单的是使用百分比实现,如下一个展示列表: .list{ width: %; background: #f0f0f9; list-style: none; font-size: ; ...
- html中表格中字体两端对齐,CSS真正实现文字两端对齐布局
css实现文字两端对齐一直以来都是一个令人头痛的事情,我也是经常遇到这样的难题,这次抽点时间整理记录一下. 这里真正实现了文字两端对齐功能,下面是代码,其中上面一种使用的是表格布局,下面的是使用的DI ...
- 页面两端对齐布局，最全，最完整的方案
文章目录 前言 实现 方案一 方案二 方案三 对比 总结 前言 在我们日常页面开发中,经常会碰到如下的场景,多行布局需要两端对齐,最后一行不满一行的,需要左对齐的情况.这里,我会把不同的实现方案做个总 ...
- html语言两端对齐末行首对齐,css两端对齐之div+css布局实现2端对齐的4种方法总结...
div+css布局实现2端对齐是我们网页排版中经常会使用到的,这篇文章将总结一下可以实现的方法: html结构 实现demo里面的div通过Css进行2端对齐. 1 2 3 1.margin负值的方式 ...
- [css] 用css怎么实现两端对齐？
[css] 用css怎么实现两端对齐? 文本的两端对齐<style>.form .text {display: inline-block;width: 65px;text-align-la ...
- css英文左右对齐,中文英文左右padding一致两端对齐实现_js
先看下图: 就是一个定宽的容器,左右padding值20像素,结果输入一段文字后(有中文也有英文字符),会发现右侧根本就不对齐,有些地方距离右侧的空白大小也不是20像素,感觉不和谐,设计师就希望排列能 ...
- css+js解决文本两端对齐以及分散对齐
一个很简单的设计排版样式,A图表示居左对其,但实际上我们想要的可能是B所示的对齐方式. 这就是传说中的两端对齐 还有一种更确切的说法是两端分散对齐. 最开始的时候 ,我试图使用CSS来解决这个小问题, ...
- CSS 文本一行两端对齐无效解决方案
今天写登录界面的时候需要左边的名称两端对齐,但是使用 text-align: justify;属性无效 这里在网上找到一个解决方案就是使用text-align: justify;加上display: ...
- 表单title文字两端对齐（2、3、4个字都对齐）
表单title文字两端对齐(2.3.4个字都对齐) 文字两端对齐 元素两端对齐 <style type="text/css">.word1{letter-spacing ...
最新文章
- u盘被分区之后怎么合并linux,U盘格式化做启动盘后从16GB变成200MB的解决方法
- 《强化学习周刊》第35期：强化学习在智能交通中的最新应用
- OpenCvSharp 图像像素归一化
- 飞桨端到端开发套件揭秘：低成本开发的四大秘密武器
- 计算机管理也无法运行,【两种解决方法】任务管理器打不开怎么办？
- python第十六课——ascii码
- JavaScript——Prototype详探
- java 中文乱码_好程序员Java学习路线分享如何处理中文参数
- win10英文系统一键装机教程
- 一键安装lamp环境 centos
- 【机器学习系列】变分推断第二讲：基于Mean Field的变分推断解法
- 南京大学计算机专业复试面试,2014 CS复试全面回忆 上机真题 面试血泪史
- 2019互联网校招薪资表： BAT、华为还没有TMD高
- 全志A20 android4.4双屏异显 双屏同显终于可以了
- 行为识别数据集 Kinetics
- ios系统苹果手机进行电脑微信双开方法详细教程
- 什么是主从复制？mysql主从复制？redis主从复制？
- 【分享】基于单片机嵌入式的家用智能节水淋浴控制器的设计-基于单片机的电子贺卡控制系统设计-基于单片机的倒计时牌控制系统设计-基于单片机的彩灯控制器系统设计-多模式彩灯-单片机的八路路数字电压表控制设计
- 手游爆发“平台战”启幕
- laydate5.3.1设置