两端对齐流式布局--全兼容ie6+

最新推荐文章于 2023-11-13 10:24:13 发布
最新推荐文章于 2023-11-13 10:24:13 发布
阅读量596 收藏 1
点赞数
分类专栏： html 文章标签： 两端对齐 流式布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhi_jie/article/details/80611219
版权

 预览：

作用：常用于布局时内部元素尺寸不固定，但又想整体对齐时。

我们常常使用float:left;时会发生高度不一致导致下一行的排版错位。

使用text-justify布局可以解决这个问题，当然内部元素只能是inline-block或inline行内元素，不支持block块级元素。最后一行默认不会两端对齐，text-align-last:justify;会使最后一行也分布对齐。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		body, select, input, textarea {
			color: #333333;
		}
		html{height:100%;}
		body{
			font-family:"微软雅黑"; line-height:22px; font-size:13px;
			background:#FFF;
			width:100%;height:100%; margin:0; padding:0;
		}
		img{border:0;}

		.box{
			width:80%; padding:20px; margin:20px auto; background-color:#f0f3f9;font-size: 0;
			text-align:justify;text-justify:inter-ideograph;/*text-align-last:justify;*/
		}
		.list{
			padding-bottom:0px; text-align:center;text-justify:center;text-align-last:center;background: #FFF;
			/*inline-block 兼容解决方案*/
			display: inline-block; *display: inline; *zoom:1; vertical-align: top;
			font-size: 15px; word-spacing:normal; letter-spacing: normal; line-height: 1.6;
		}
		.list img{height: 300px;}

	</style>
</head>
<body>
	<div class="box">
		<div class="list"><img src="https://cdn.pixabay.com/photo/2018/02/05/23/05/road-3133502__340.jpg"><br><span>公路</span></div>
		<div class="list"><img src="https://cdn.pixabay.com/photo/2018/01/01/01/57/woman-3053492__340.jpg"><br>标题名</div>
		<div class="list"><img src="https://cdn.pixabay.com/photo/2018/02/14/21/45/woman-3153999__340.jpg"><br><span style="font-size: 30px;">标题名2</span>标题名2标题名2</div>
		<div class="list"><img src="https://cdn.pixabay.com/photo/2018/02/01/12/51/mammal-3123179__340.jpg"><br><br><br><span style="font-size: 30px;">超高度</span></div>
		<div class="list"><img src="https://cdn.pixabay.com/photo/2018/05/04/10/30/team-3373638__340.jpg"></div>
		<div class="list"><img src="https://cdn.pixabay.com/photo/2018/01/09/22/51/rose-3072698__340.jpg"></div>
		<div class="list"><img src="https://cdn.pixabay.com/photo/2018/02/05/23/05/road-3133502__340.jpg">公路</div>
		<div class="list"><img src="https://cdn.pixabay.com/photo/2018/01/01/01/57/woman-3053492__340.jpg">标题名</div>
		<div class="list"><img src="https://cdn.pixabay.com/photo/2018/02/14/21/45/woman-3153999__340.jpg"><br>标题名2标题名2标题名2</div>
		<div class="list"><img src="https://cdn.pixabay.com/photo/2018/02/01/12/51/mammal-3123179__340.jpg"></div>
		<div class="list"><img src="https://cdn.pixabay.com/photo/2018/05/04/10/30/team-3373638__340.jpg"></div>
		<div class="list"><img src="https://cdn.pixabay.com/photo/2018/01/09/22/51/rose-3072698__340.jpg"></div>
	</div>
</body>
</html>

 

夕空
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
AXURE 9 布局介绍
莫得感情的工具人
03-25 1216
布局介绍 话不多说，首先展示一下axure 9的整体布局。 下面具体介绍每一部分。 顶部快捷功能区及菜单栏 这一部分主要是提供常用的功能，如文件的保存、导入，元件的快速组合，修改元件位置样式等操作。这里的快捷功能区可以在“视图-工具栏-自定义基本工具列表”中进行自定义编辑。 元件区域介绍 通过元件区域可以管理系统提供的元件以及自己加载的元件，可以通过关键词搜索元件，进行使用。 母版区域介绍 ...
前端学习笔记 - 移动端Web开发
fengxm0309的博客
10-18 1060
移动端基础 浏览器现状 PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器 移动端常见浏览器：UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌 浏览器，搜狗手机浏览器，猎豹浏览器，以及其他杂牌浏览器。 国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android修改开发的一样 兼容移动端主流浏览器，处理Webkit内核浏览器即可
兼容ie6/ie7的inline-block元素的两端对齐布局
weixin_34025151的博客
11-19 113
<!doctypehtml> <html> <head> <metacharset="utf-8"> <title>兼容ie6/ie7的inline-block元素的两端对齐布局</title> <metaname="author"content="ifrans.cn"/> ...
两端对齐布局
蓑笠翁
06-13 778
项目中有用到于两端对齐的情况，此时使用flex布局中的justify-content:space-between属性即可使盒子两端分散布局。 两个盒子分散到两端： 代码如下： /*html代码*/ <div class="flex-space-between"> <div class="flex-box2">1</div> <div class="flex-box2">2</div> </div> /*css代码*/ .
流式布局-两栏布局
qq_42239440的博客
07-08 567
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 1.利用bfc块级格式化.
css流式布局应用——同一行文字左右平均对齐
zhengTornado的博客
12-14 618
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>同一行文字左右平均对齐</title> </head> <style> a{
前端学习笔记01---HTML5、CSS3、移动端前端基础学习知识点合集
weixin_46615135的博客
03-23 1474
前端学习笔记01---HTML5、CSS3、移动端前端基础学习知识点合集
前端面试题---html/css
weixin_44501366的博客
10-07 1214
!DOCTYPE 标签：head：body:base:可以用来统一设置当前页面上的超链接的跳转方式< base >标签为页面上的所有链接规定默认地址或默认目标使用了 < base > 标签，则必须具备 href 属性或者 target 属性或者两个属性都具备通常情况下，浏览器会从当前文档的URL中提取相应的元素来填写相对URL中的空白。 使用< base >标签可以改变这一点。浏览器随后将不再使用当前文档的URL，而使用指定的基本URL来解析所有的相对URL。这其中包括 < a >、< img >、< li
红队系列-shellcode AV bypass Evasion免杀合集
aming小老弟
11-13 1244
壳就是软件所增加的保护，并不会破坏里面的程序结构，当我们运行这个加壳的程序时，系统首先会运行程序里的壳，然后由壳将加密的程序逐步还原到内存中，最后运行程序。加壳虽然对于特征码绕过有非常好的效果，加密壳基本上可以把特征码全部掩盖，但是缺点也非常的明显，因为壳自己也有特征，主流的壳如VMP, Themida等等。客户端上传特征，在云端无法检测到，则上传文件，文件通过杀软系统进行评判，得出总评分，对于无结果的，进行鉴定系统评分，总共得出结果返回给用户，并入云端库。比如可以远程读取png中的shellcode。
移动端布局笔记
nuomi_w的博客
11-28 312
1.移动web流式布局 1.移动端基础 兼容移动端主流浏览器，处理Webkit内核浏览器即可。 学会用谷歌浏览器模拟手机界面及调试。 2.视口 视口（viewport）就是浏览器显示页面内容的屏幕区域。视口可分为布局视口、视觉视口和理想视口。 2.1布局视口 layout viewport 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。 iOS,Android基本都将这个视口分辨率设置为980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般
不对称的流式布局
06-29
本资源包括： 1）28个页面（都是响应式的流式布局） 2）404特效页面 3）win8 风格的流式布局
Axure RP8 bootstrap4 样式库 PRD必备
07-31
使用非常简单： Axure RP8 bootstrap 4 样式库，亲测有效！！使用方法：打开Axure8》元素库》载入元素库》选中本文件即可，PRD必备神器！
美观的自定义选择标签FlowLayout外加支持左中右对齐以及滚动等功能_图文的源码
12-05
安卓(android)选标签，很多都是做的FlowLayout瀑布流+ToggleButton的方式，因为它做tag比较符合现在的选择需要，不过支持左中右内容对齐外加滚动的可能没有实现，所以我给补齐，当然技术越来越新，可以考虑使用FlexboxLayout 原文地址:http://blog.csdn.net/bright789/article/details/53461724
左右两列且可收缩的流式布局框架--Jquery于Div/Css结合
lianxiangbus
12-04 146
下载地址
手把手教你Axure-布局篇
明天上线的博客
09-08 536
在上一篇文章中，对于原型的认知，我已经做了相关介绍。接下来，我将会手把手教大家操作Axure。先说下我使用的版本：Axure 9，版本号是：9.0.0.3732在这里，有一点大家需要特别注...
【高级UI】【006】测量和布局实战，流式布局
天天向上 Up Up Up (*^▽^*)
10-12 227
前言 实现思路 源码 下载
CSS响应式布局加流式布局
yuan5801551的博客
08-15 557
CSS响应式布局 div{ border:1px solid rebeccapurple; } .header{ width: 80%; height: 100px; margin: 0 auto; background-color: #4CAF50; } .content{ ...
5分钟玩转Axure之自适应设计（PC、平板、手机）
黄昏誓
06-20 3791
动态设计什么叫自适应设计？实现Axure的自适应设计总结 什么叫自适应设计？ 自适应设计其实指的就是自主适应浏览器的变化。很直白的解释就是，正常情况下的认知是你的电脑屏幕>平板屏幕>手机屏幕，随着物理显示屏的减小，则能显示的像素也随之变少，也就意味着如果同一套设计用在了三端上你的可见内容和用户体验将会很差。 因为显示牵扯到前端开发的设计，作为一个合格的产品经理你总不能发三套原型设计给前端自己去找其中的异同点吧，这样既浪费产品经理的设计时间，也降低了开发的效率；博主当初做全栈开发的时候，写这种自适
text-align:justify两端对齐布局兼容ie
最新发布
05-23
text-align:justify是一种常见的文本对齐方式，它会将文本段落两端对齐，让页面看起来更加整洁美观。但是，text-align:justify在IE浏览器中的兼容性不太好，具体原因是IE浏览器不支持text-justify属性。 为了兼容IE...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值