300分求html布局问题，大的div包含若干小的div，如何使小 div在大div内从上到下，从左到右排列，就像winxp桌面的布局一样，顶帖有分

neverdead 2009-04-15 09:49:50

大的div包含若干小的div，如何使小 div在大div内从上到下，从左到右排列，就像winxp桌面的布局一样

<DIV style="border:1px solid red;float:left;width:200px;height:200px;">
<div style="border:1px solid blue;height40px;width:40px;margin:1px;"></div>
<div style="border:1px solid blue;height40px;width:40px;margin:1px;"></div>
<div style="border:1px solid blue;height40px;width:40px;margin:1px;"></div>
</div>

<DIV style="border:1px solid red;float:left;width:200px;height:200px;">

<div style="border:1px solid blue;height40px;width:40px;margin:1px;"></div>

<div style="border:1px solid blue;height40px;width:40px;margin:1px;"></div>

<div style="border:1px solid blue;height40px;width:40px;margin:1px;"></div>

</div>

上面这个布局能做到从上到下，但是做不到第一列放不下后，自动放到第二列这个要求
不一定要用div，只要能做到从上到下，从左到右排列

...全文

713 26 打赏收藏转发到动态举报

写回复

用AI写文章

26 条回复

切换为时间正序

请发表友善的回复…

发表回复

杨哥儿 2009-04-16

打赏
举报

用表格布局吧!
每个小div放在每全单元格中,顺序你想怎么做都可以的.
但好象不能支持拖动.

zb1999 2009-04-16

打赏
举报

呵呵 up

zing02223 2009-04-15

打赏
举报

好吧,需求都没理顺,很难有答案的.

是否需要拖拽?如果需要拖拽效果,页面就需要用定位的方式来做.
或者是用伪拖拽的方法,总之都逃离不了定位的关系.

如果不能拖拽,正常情况下自动顶上来是怎样的操作方式?删除某个而自动顶上来的?

可能一个需求的改变,对整个布局都有深远的影响.做项目最忌讳中途改变想法.

neverdead 2009-04-15

打赏
举报

这个倒是没特别要求，正常情况下应该是能自动顶上来的

zing02223 2009-04-15

打赏
举报

如果纵向排列后,是否也有拖拽的功能,拖拽后原位置为空还是下一列填充上去?

baveboy 2009-04-15

打赏
举报

这样好像不是很好实现，期待中~~~~

neverdead 2009-04-15

打赏
举报

我需要的是，管理桌面图标的排列

neverdead 2009-04-15

打赏
举报

11楼的朋友你应该没有看明白的帖子的意思

liupengbart 2009-04-15

打赏
举报

其实不难实现。
上面一个层，把宽度设大，最好是设为100%。这样上面就无法再放层了，
中间区域用三个层实现。左右两边的层，分别用style="float:left"，和style="float:right"，让它们飘浮在窗体的左右两边。
剩下的部份就是中间区域了。
底下类似于状态栏的层，和顶部层一样，把宽度设大。让其占据整个屏幕的宽度就行了。

上面所述只是讲解大概的思路，如果楼主还有问题可以私聊。
我的QQ：68100893

neverdead 2009-04-15

打赏
举报

7楼的，float:left
display:block，先从左到右排列，然后从上到下排列，不合要求

怕吐 2009-04-15

打赏
举报

相关的都放进来了

neverdead 2009-04-15

打赏
举报

你的布局的从左到右了，不符合排列规则啊，
一定要先从上到下，然后再从左到右

岑子哥 2009-04-15

打赏
举报

float:left
display:block

neverdead 2009-04-15

打赏
举报

4楼的朋友，layout.css贴下

yhjhoo 2009-04-15

打赏
举报

不知何意

怕吐 2009-04-15

打赏
举报

<html>

<head>

<meta http-equiv='Content-Type' content="text/html; charset=gb2312">

<title>111/title>

<link href="/layout.css" rel="stylesheet" type="text/css" />

<style type="text/css">

<!--

.ImgList {

	width: 620px;

}

.NewsContent li {

	height:140px;

	width: 149px;

	width: 144px !important;

	float: left;

	list-style-type: none;

	border: 1px solid #CCCCCC;

	margin-left: 3px;

	text-align: center;

	margin-top: 3px;

	padding-top: 5px;

	padding-right: 0;

	padding-bottom: 0;

	overflow: hidden;

}

.NewsContent li img{

	display:block;

	margin:0 auto;

}

-->

</style>

</head>



<body>

<div id="Box">





  <div class="ImgList"><div class="NewsContent"><!--PicCenter:start-->

<li><a href="/case/tuoliu/20080407456.html" target="_blank"><img border="0" src="/UploadFiles/newsphoto/2008471608973.jpg"width="130" height="100"><br>工程</a></li>

<li><a href="/case/tuoliu/20080407455.html" target="_blank"><img border="0" src="/UpLoadFiles/4.jpg"width="130" height="100"><br>工程</a></li>

<li><a href="/case/tuoliu/20080407454.html" target="_blank"><img border="0" src="/UpLoadFiles/5.jpg"width="130" height="100"><br>工程</a></li>

<li><a href="/case/tuoliu/20080407453.html" target="_blank"><img border="0" src="/UploadFiles/newsphoto/200847155313843.jpg"width="130" height="100"><br>工程</a></li>



<!--PicCenter:end--></div></div>

       

       

       

        

</div><!--Right层结束-->

</div>

</body>

</html>