怎么设置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>
最佳答案
1
应该是给ul下面的li设置float:left；
奖励园豆：5
还是不行
@小奉手:
#ZongDiv {
border: 1px solid red;
height: 560px;
width: 394px;
margin: auto;
}
你整个div宽度才560px;你的图片是510px;怎么可能横着排列嘛
@单恋: 这个无所谓，就算把宽度给撤了还是这样，如果有效果图片会和现在的这种效果一样的撑出来
@小奉手:
img {
height: 510px;
width: 394px;
}
你改成
img {
height: 100px;
width: 100px;
}
这样就横着排了 如果你想所有的都横着排 就得控制图片宽度 还有你的div宽度
@单恋: 恩恩，把div的高宽干掉就好了
其他回答(2)
0
float:left
设置图片的css？还是。。。
@小奉手: TuDiv 给这个加上 试一试
@wolfy: 不行，在img里加也不可以
@小奉手: div高度一定 宽度自增
@wolfy: 不行。应该和这没关系吧
@小奉手:
ul li
{
float:left;
}
@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
外围div高度要大于图片高度，宽度同样，样式增加 float:left;
