手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >在固定大小DIV层插入N个图片使其一行排列
在固定大小DIV层插入N个图片使其一行排列
摘要:如何在固定大小的DIV层插入N多个图片,使其一行排列,超出层宽时出现滑动条?原以为利用overflow属性可以实现,但是测试失败。后来利用d...

如何在固定大小的DIV层插入N多个图片,使其一行排列,超出层宽时出现滑动条?

原以为利用overflow属性可以实现,但是测试失败。后来利用div层叠实现了效果。

HTML代码:

<>

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="content-type" content="text/html;charset=utf-8">

</head>

<body>

<div>

<div><img src="test1.jpg"></div>

<div><img src="test2.jpg"></div>

<div><img src="test3.jpg"></div>

</div>

</body>

</html>

css控制样式:

.div{

width:400px;

height:200px;

overflow-y:hidden; /*只出现水平滚动条*/

position: absolute;

}

.div1{

position:absolute;

z-index:1;

}

.div2{

position:absolute;

z-index:5;

left:200px;

top:0px

}

.div3{

position:absolute;

z-index:10;

left:400px;

top:0px

}

效果:

1

【在固定大小DIV层插入N个图片使其一行排列】相关文章:

CSS应用基础教程(1) 基本认识

关于CSS组合与CSS嵌套的写法应用

CSS line-height行高上下居中垂直居中样式属性

css实现文字层浮在图片之上示例代码

控制css字间距和对齐方式所用属性介绍

三个很特别的CSS小技巧分享

CSS应用基础教程(4) 颜色背景

让内层将外层撑开

解答何谓DIV+CSS

让CSS样式表优化更整洁而简短

精品推荐
分类导航