首页新闻找找看学习计划

怎么设置css,把放在一个div中的图片横着排列

0
[已解决问题] 解决于 2014-09-12 13:52

代码:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>

<style type="text/css">
#ZongDiv {
border: 1px solid red;
height: 560px;
width: 394px;
margin: auto;
}

#TuDiv {
height: 510px;
background-color: red;
}

#XuanDiv {
height: 50px;
}

img {
height: 510px;
width: 394px;
}
</style>

 

</head>
<body>
<div id="ZongDiv"
<div id="TuDiv">
<ul>
<li><img src="qiehuan/1.jpg"/> </li>
<li><img src="qiehuan/2.jpg"/> </li>
<li><img src="qiehuan/3.jpg"/> </li>
<li><img src="qiehuan/4.jpg"/> </li>
<li><img src="qiehuan/5.jpg"/> </li>

</ul>

</div>

<div id="XuanDiv">

</div>

</div>

</body>
</html>

小奉手的主页 小奉手 | 初学一级 | 园豆:148
提问于:2014-09-12 13:05
< >
分享
最佳答案
1

应该是给ul下面的li设置float:left;

奖励园豆:5
单恋 | 小虾三级 |园豆:678 | 2014-09-12 13:25

还是不行

小奉手 | 园豆:148 (初学一级) | 2014-09-12 13:30

@小奉手: 

#ZongDiv {
border: 1px solid red;
height: 560px;
width: 394px;
margin: auto;
}

 

你整个div宽度才560px;你的图片是510px;怎么可能横着排列嘛

单恋 | 园豆:678 (小虾三级) | 2014-09-12 13:42

@单恋: 这个无所谓,就算把宽度给撤了还是这样,如果有效果图片会和现在的这种效果一样的撑出来

小奉手 | 园豆:148 (初学一级) | 2014-09-12 13:44

@小奉手: 

img {
height: 510px;
width: 394px;
}

你改成

img {
height: 100px;
width: 100px;
}

这样就横着排了 如果你想所有的都横着排 就得控制图片宽度 还有你的div宽度

单恋 | 园豆:678 (小虾三级) | 2014-09-12 13:47

@单恋: 恩恩,把div的高宽干掉就好了

小奉手 | 园豆:148 (初学一级) | 2014-09-12 13:51
其他回答(2)
0

float:left

wolfy | 园豆:2636 (老鸟四级) | 2014-09-12 13:11

设置图片的css?还是。。。

支持(0) 反对(0) 小奉手 | 园豆:148 (初学一级) | 2014-09-12 13:13

@小奉手: TuDiv 给这个加上 试一试

支持(0) 反对(0) wolfy | 园豆:2636 (老鸟四级) | 2014-09-12 13:14

@wolfy: 不行,在img里加也不可以

支持(0) 反对(0) 小奉手 | 园豆:148 (初学一级) | 2014-09-12 13:17

@小奉手: div高度一定 宽度自增

支持(0) 反对(0) wolfy | 园豆:2636 (老鸟四级) | 2014-09-12 13:18

@wolfy: 不行。应该和这没关系吧

支持(0) 反对(0) 小奉手 | 园豆:148 (初学一级) | 2014-09-12 13:22

@小奉手:   

ul li
        {
            float:left;
        }

支持(0) 反对(0) wolfy | 园豆:2636 (老鸟四级) | 2014-09-12 13:25

@wolfy: 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>

<style type="text/css">
#ZongDiv {
border: 1px solid red;
height: 560px;
width: 394px;
margin: auto;
}

#TuDiv {
height: 510px;
/*background-color: red;*/
}

#XuanDiv {
height: 50px;
}

img {
height: 510px;
width: 394px;
}

.JuLi {
margin-top: -16px;
margin-left: -40px;
}

ul li {
display: inline-block;
float:left;
}
</style>

 

</head>
<body>
<div id="ZongDiv">
<div id="TuDiv" class="JuLi">
<ul>
<li>
<img src="qiehuan/1.jpg" />
</li>
<li>
<img src="qiehuan/2.jpg" />
</li>
<li>
<img src="qiehuan/3.jpg" />
</li>
<li>
<img src="qiehuan/4.jpg" />
</li>
<li>
<img src="qiehuan/5.jpg" />
</li>

</ul>

</div>

<div id="XuanDiv">
</div>

</div>

 


</body>
</html>

支持(0) 反对(0) 小奉手 | 园豆:148 (初学一级) | 2014-09-12 13:30
0

外围div高度要大于图片高度,宽度同样,样式增加 float:left;

焰£天琊 | 园豆:418 (菜鸟二级) | 2014-09-12 13:54
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册