使用inline-block进行图文列表布局

最新推荐文章于 2022-07-16 10:22:59 发布

nelson

最新推荐文章于 2022-07-16 10:22:59 发布

阅读量606

点赞数

分类专栏： CSS 文章标签： border ie class html css

本文链接：https://blog.csdn.net/Do_it__/article/details/6832419

版权

CSS 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

据yss对目前的现有的图文列表布局有两种：

一种是采用表格的方式；第二种采用li方式。

而yss今天要说的也是li方式，但是是在它基础上进行了一次创新。

创新点就在于采用了inline-block模式去设定li。

/* inline-block 说明 */
IE6&7是不支持inline-block的，需要通过HACK去解决：
所以inline-block的写法是：
display: inline-block;
*display: inline;
*zoom: 1;
这样就导致了一个结果，IE下是下对齐。
但是通过对css设置： vertical-align: top;就比较完美的解决了这个问题。

优点在于：1，不必为每个li的高度不一致而烦恼（高度不一致会导致图文布局混乱，比如标题换行了）；

缺点在于：1，每个li之间不能有空格，包括ul；

对应的html结构如下：

<!doctype html>
<html>
<head>
	<title>使用inline-block进行图文布局</title>
	<meta charset="gbk" />
	<style>
	ul,li{list-style:none;margin:0;padding:0;}
	.lst-img-4{
		width: 635px;
		overflow: hidden;
	}
	.lst-img-4 ul{width: 110%;}
	.lst-img-4 li{
		text-align: left;
		display: inline-block;
		*display: inline;
		*zoom: 1;
		padding: 10px 40px 0 5px;
		width: 122px;
		line-height: 20px;
		/* vertical-align: top; 重点所在：解决了IE6&7下inline-block下对齐的问题，把它们变成了上对齐 */
	}
	.lst-img-4 img{border: 1px solid #ddd;}
	</style>
</head>
<body>
<div class="lst-img-4">
	<ul>
		<li>
			<a href="#"><img src="#" width="120" height="160" /></a>
			<h4>title部分</h4>
			<p>some description....</p>
		</li>
		<li>
			<a href="#"><img src="#" width="120" height="160" /></a>
			<h4>title部分</h4>
			<p>some description....some description....some description....</p>
		</li>
		<li>
			<a href="#"><img src="#" width="120" height="160" /></a>
			<h4>title部分title部分title部分title部分</h4>
			<p>some description....</p>
		</li>
		<li>
			<a href="#"><img src="#" width="120" height="160" /></a>
			<h4>title部分</h4>
			<p>some description....</p>
		</li>
		<li>
			<a href="#"><img src="#" width="120" height="160" /></a>
			<h4>title部分</h4>
			<p>some description....</p>
		</li>
	</ul>
</div>
</body>
</html>

上面只是为了查看代码方便，如果需要查看的话，直接copy后，记得把li之间的空格去掉～