DIV+CSS怎么让图片横向排列自动换行
<divid="main"><ul><listyle="list-style-type:none;"><imgsrc="./images/azfoot.jpg"</li>...
<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行自动往下排列 求问样式怎么写 展开
<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行自动往下排列 求问样式怎么写 展开
4个回答
展开全部
<li>标签是默认换行的，你可以选择用表格实现，也可以选择用JS将奇数列正常显示，偶数列的<li>浮动到右侧试试。
追问
有代码吗 刚在学习 不懂
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
#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的宽度。
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{
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
每个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都左浮动
<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都左浮动
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!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没闭合， 图片自己再弄，别太大。
<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没闭合， 图片自己再弄，别太大。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
