inline-block实现的列表布局

与其说是inline-block实现的,还比如说是line box模型实现的布局。为什么?往下看...

对于line box模型,不熟悉的同学可以看看张鑫旭大神的介绍

对于布局,肯定有个containing block(包含块),然后就有一些inline-block box来构建成line box模型;最后加点修饰的调料就行了。

效果如下:

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8" />
	<style type="text/css">
	.container{
		margin: 0 auto;
		width: auto;
		border: 1px solid red;
		padding-left: 30px;text-align:justify;

		float: left;
	}

	.item{
		display: inline-block;
		margin-right: 30px;
		vertical-align: middle;
		text-align: center;
		width: 50px;
	}
	.img{
		width: 50px;
		height: 50px;
		background: blue;
	}
	</style>
	</head>
	<body>
	<div class="container">
		<span class="item"><div class="img"></div>01</span>
		<span class="item"><div class="img"></div><br>我是最高的,最高的,,,,</span>
		<span class="item"><div class="img"></div>03</span>
		<span class="item"><div class="img"></div>我也高,但没有你高,,</span>
	</div>
	</body>
</html>
时间: 2024-10-13 02:22:31

inline-block实现的列表布局的相关文章

拜拜了,浮动布局-基于display:inline-block的列表布局——张鑫旭

一.一抹前言 没有爱的日子,时间如指尖细沙,不知不觉就流逝了.写“CSS float浮动的深入研究.详解及拓展(一)”和“CSS float浮动的深入研究.详解及拓展(二)”似乎就在不久前,然而相隔差不多有一年之久了.文章最后留下了“浮动布局更好的替代方案是什么?”后文再介绍的预告. 由于自己肚子中的货物不足以撑起一篇足够质量的文章,所以关于“浮动布局更好的替代方案是什么?”的文章一直并未动笔.好在事物总是在发展的,我也是每天都是在进步,对于列表布局的思考也愈发成熟.加上正好前不久又有人询问我“

基于display:inline-block的列表布局

一.用float(浮动)实现列表布局的局限 一说起列表布局.大家首先想到的就是用浮动float.这是相当常见的也是目前最最主流的列表布局方式,所以这里就不吃咸鱼蘸酱油--多此一举了.对于浮动局部的局限性,想必同行们都知道,就是每个列表元素的高度必须要一致,否则就会像是俄罗斯方块一样,"锯齿相错",例如一个左浮动列表布局,如果第一行有个列表高度高于其他列表,那就在第二行,第一个元素会沿着最高元素的右侧对齐,此原因是属于恶魔系的float属性破坏了inline box.如下图: 浮动本身就

inline block inline-block总结

一.block表示块级元素,其元素通常会单独成一块,独占一行: 二.inline表示内联元素,不会产生换行,其排版会在一行显示,直到一行被占满. 三.常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等:常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR        等. 四.一般使用display:block与display:inline来改变元素的

【前端】Vue.js实现网格列表布局转换

网格列表布局转换 实现效果: 实现代码及注释: <!DOCTYPE html> <html> <head> <title>布局转换</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e

CSS display:inline|block|inline-block差异

display:inline|block|inline-block三属性的区别和联系,block就是将元素显示为块级元素,inline就是将元素 显示为行内元素,CSS display:inline-block将对象呈递为内联对象,但是对象的内容作为块对象呈递.旁边的内联对象会被呈递在同一行内,允许空格. 详解CSS display:inline|block|inline-block的区别 ◆CSS display:block CSS display:block就是将元素显示为块级元素. blo

ie、firefox、chrome中关于style=&quot;display:block&quot; 引发的页面布局错乱的解决办法

ie.firefox.chrome中关于style="display:block" 引发的页面布局错乱的解决办法: table中tr 添加style="display:block" 导致页面布局错乱 对table中tr 不显示时,添加style="display:none",ie.chrome.firefox等都没有问题.但是如果想要显示某个tr,就不能使用style="display:block"了,因为,在ie下,可以正常

[课程设计]Scrum 2.1 多鱼点餐系统开发进度(下单列表布局)

[课程设计]Scrum 2.1 多鱼点餐系统开发进度(下单列表布局) 1.团队名称:重案组 2.团队目标:长期经营,积累客户充分准备,伺机而行 3.团队口号:矢志不渝,追求完美 4.团队选题:餐厅到店点餐系统WEB 5.Sprint 1时间:11.14-11.23 重案组成员   姓名 学号 博客链接 Github链接 队长 黄冠锋 201406114134 http://www.cnblogs.com/hgf520/ https://github.com/crown999   卢利钦 2014

inline,block,inline-block解析

display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子. display:inline就是将元素显示为行内元素. inline元素的特点是:  和其他元素都在一行上: 高,行高及顶和底边距不可改变: 宽度就是它的文字或图

好的列表布局

一般列表页布局: 里面的元素float,全是一样的间距,(例如:都是margin-right:20px;便于套模板)外边的div要加一个margin-right:-20px;保证最后一个元素不会被挤下去. 优化布局: 在外面加一个div,运用overflow:hidden,防止缩小窗口出现右侧溢出