DIV+CSS怎么让图片横向排列自动换行

<div id="main">
<ul>
<li style="list-style-type:none;"> <img src="./images/azfoot.jpg"</li>
<li style="list-style-type:none;"><img src="./images/azfoot.jpg"</li>
<li style="list-style-type:none;"> <img src="./images/azfoot.jpg"</li>
<li style="list-style-type:none;"><img src="./images/azfoot.jpg"</li>
<li style="list-style-type:none;"> <img src="./images/azfoot.jpg"</li>
<li style="list-style-type:none;"><img src="./images/azfoot.jpg"</li>
</ul>
</div>
就是我在main 里面加的UL 然后现在想让里面的图片分2列N行自动往下排列求问样式怎么写

举报该问题

其他回答

第1个回答 2015-01-23

<li>标签是默认换行的，你可以选择用表格实现，也可以选择用JS将奇数列正常显示，偶数列的<li>浮动到右侧试试。追问

有代码吗刚在学习不懂

第2个回答 2015-01-23

#main{
display: block;
width: 512px;
}
#main ul li {
text-align: center;
display: block;
margin-top:6px;
width: 256px;
height: 60px;
float: left;
position: relative;
}
你要2列N行，那么你就要设置外面div的宽度。追问

不行啊试了一下所有的图片全部重叠压在一起了

追答

你在吧li 里的图片样式在设置一下
#main ul li img{

}

第3个回答 2015-01-23

每个UL下面写2个LI如：
<ul>
<li style="list-style-type:none;"> <img src="./images/azfoot.jpg"</li>
<li style="list-style-type:none;"><img src="./images/azfoot.jpg"</li>
</ul>
<ul>
<li style="list-style-type:none;"> <img src="./images/azfoot.jpg"</li>
<li style="list-style-type:none;"><img src="./images/azfoot.jpg"</li>
</ul>
再写个css样式，如：
<style type="text/css">
ul{clear:both;}
li{float:left;}
</style>
所以UL都清除浮动，所以LI都左浮动本回答被提问者和网友采纳

第4个回答 2015-01-23

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片排列</title>
</head>
<style>
#main{ width:600px;}
ul li {
float:left;
margin-left:10px;
list-style-type: none;
}
</style>
<body>
<div id="main">
<ul>
<li><img src="../Pictures/u=914035646,1225870976&fm=56.jpg" /></li>
<li><img src="../Pictures/u=914035646,1225870976&fm=56.jpg" /></li>
<li><img src="../Pictures/u=914035646,1225870976&fm=56.jpg" /></li>
<li><img src="../Pictures/u=914035646,1225870976&fm=56.jpg" /></li>
<li><img src="../Pictures/u=914035646,1225870976&fm=56.jpg" /></li>
<li><img src="../Pictures/u=914035646,1225870976&fm=56.jpg" /></li>
</ul>
</div>
</body>
</html>
PS:定义了宽度600，样式多可以写在上面，还有你img没闭合，图片自己再弄，别太大。

相似回答

div+css 如何横向排列,要求横向排两个。超过两个就自动换行!答：没必要写那么多的，直接A就搞定了。代码总发布上去，你百度HI我，我给你发你看看是不是你要的效果

div+css为什么我的图片不能自动换行,我想让他每行只显示三个产品,但是...答：像这种图文混排的样式应该用dl dt dd标签来写，没有你的html代码看不太懂你怎么写的，第四张图片不换行的原因是因为图片所在的div宽度太宽了，你试着把他的宽度减小试试，这应该是ie出现的问题吧，Firefox不会出现，另外代码写的不够规范，标签名ui li 应该用小写，属性也是小写。

大家正在搜

怎么让列表横向排列如何让横向排列的多组数据纵向排列 html让图片横向排列如何让纵向排列变成横向怎么让li横着排列怎样让电脑下面窗口横向排列怎么让文件夹横着排列怎么让照片在div中横着排 css让图片4列排列