关于CSS对齐的一个问题，关于循环的DIV

Derekwong 2008-07-26 09:52:06

上面有一个DIV宽720

下面的DIV是一个循环值，设定循环一行2个，列数不限

下面DIV中间间距设定为10，要DIV两边对齐，这个单个的DIV宽应该是720/2-10=350,这样的效果这么设置.

=================【上面的DIV】

======== ========【下面的循环DIV】

======== ========【下面的循环DIV】

======== ========【下面的循环DIV】

类似以上这个效果

...全文

297 13 打赏收藏转发到动态举报

写回复

用AI写文章

13 条回复

切换为时间正序

请发表友善的回复…

发表回复

icecell 2008-07-26

打赏
举报

刚刚试了下，IE7没问题，firefox未测试

icecell 2008-07-26

打赏
举报

<!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>

<style type="text/css">

#div1{

width:720px;

padding:0;

}

#div1 div{

background:#66FFCC;

margin:0 0 5px 0;

float:left;

}

</style>

</head>

<body>

<div id="div1"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>

<script type="text/javascript">

a=document.getElementById("div1").getElementsByTagName("div")

a[0].style.width="720px"

a[0].style.hight="100px"

for(i=1;i <a.length;i++){

  a[i].style.width="350px"

  a[i].style.hight="100px"

}

for(i=1;i <a.length;i+=2){

  a[i].style.marginRight="20px"

}

</script>

</body>

</html>

Derekwong 2008-07-26

打赏
举报

谢谢，adonis_net

我的具体情况是这样的

<div id=top class=middle_left </div>

<% set rs=server.createobject("adodb.recordset")
rs.open "select * from d_sort where d_show=1 order by anclassidorder asc",conn,1,1
do while not rs.eof
%>
<% for n=1 to 2 %>
<div id=down class=table_bk><div class=tableup><%=rs("anclass")%></div><div class=tabledown>123</div></div>
<%
rs.movenext
if rs.eof then exit for
if rs.eof then exit do
Next
loop
rs.close
set rs=nothing
%>

下面的DIV是这样循环出来的，想和上面的DIV两端对齐，而下面循环出的DIV之间又要有间距

Derekwong 2008-07-26

打赏
举报

谢谢ICECELL，我试了一下这样，好像不行，页面中没东西显示了

a=document.getElementById("xh").getElementByTagName("xhxw")
for(i=1;i <a.length.i+=2)
a[i].style.marginRight="10px

<div id=xh name=xh2 class=table_bk><div class=tableup><%=rs("anclass")%></div><div class=tabledown>123</div></div>

adonis_net 2008-07-26

打赏
举报

这样吗?



<!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=gb2312" />

<title>无标题文档</title>

</head>



<body>

<input  type="button" id="add" onclick="addRow()" value="添加"/>

<div id="topDiv" style="width:720px; line-height:25px; border:1px solid #999999;margin:auto; font-size:12px; text-align: center;">this is div one</div>

<div id="loop"  style="width:722px; margin:auto; padding-top:2px; height: 100%;">

</div>

</body>

</html>

<script>

var Par = document.getElementById("loop");

function addRow()

{

    //左DIV

	var boxL = document.createElement("div");

	

	boxL.style.width = "356"+"px";

	boxL.style.lineHeight = "25"+"px";

	boxL.style.border = "1px solid #999999";

	boxL.style.styleFloat  = "left";

	boxL.style.fontSize = "12";

	boxL.style.textAlign = "center";

	



    //右DIV

	var boxR = document.createElement("div");

	boxR.style.width = "356"+"px";

	boxR.style.lineHeight = "25"+"px";

	boxR.style.border = "1px solid #999999";

	boxR.style.styleFloat = "right";

	boxR.style.fontSize = "12";

	boxR.style.textAlign = "center";

	Par.appendChild(boxR);

    Par.appendChild(boxL);

	boxL = null;

	boxR = null;



}

</script>

icecell 2008-07-26

打赏
举报

写错了，用这个

用javascript试试看
先把它们的margin-left和margin-right全部设置为0
a=document.getElementById("id").getElementByTagName("div")//id是它们所在的标签的id，div就是你所说的div
for(i=1;i <a.length.i+=2)//从第二个div开始，也就是下面小的div
a[i].style.marginRight="20px"//左边div的右间距设置为20

icecell 2008-07-26

打赏
举报

用javascript试试看
先把它们的margin-left和margin-right全部设置为0
a=document.getElementById("id").getElementByTagName("div")//id是它们所在的标签的id，div就是你所说的div
for(i=1;i<a.length.i+=2)//从第二个div开始，也就是下面小的div
a[i].style.marginRight=20px//左边div的右间距设置为20

Derekwong 2008-07-26

打赏
举报

又要对齐，又要有间隔

margin 设置间隔的话，可能就对不齐上面那个DIV

icecell 2008-07-26

打赏
举报

不是说要对齐吗？大概我理解错了。margin可以修改的

Derekwong 2008-07-26

打赏
举报

float:left;margin-left:0;margin-right:0;

这肯定不行，循环出来的DIV中间就没间距了

icecell 2008-07-26

打赏
举报

float:left;margin-left:0;margin-right:0;

ld2099 2008-07-26

打赏
举报

你们怎么搞这么复杂！

<div style="width:720px;">
<div style="width:720px;height:50px;background:#F00;"></div>
<br>
<%
i=1
Do While Not Rs.Eof
If i Mod 2=0 Then
tmpC="#00F;margin-left:20px;"
Else
tmpC="#CCC;"
End If
%>
<div style="width:350px;float:left;height:50px;margin-top:5px;background:<%=tmpC%>"></div>
<%
i=i+1
Rs.MoveNext
Loop
%>
</div>

adonis_net 2008-07-26

打赏
举报

这样行吗?



<!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=gb2312" />

<title>无标题文档</title>

</head>



<body>

<input  type="button" id="add" onclick="addRow()" value="添加"/>

<div id="topDiv" style="width:720px; line-height:25px; border:1px solid #999999;margin:auto; font-size:12px; text-align: center;">this is TOP div </div>

<div id="loop"  style="width:722px; margin:auto; padding-top:2px; height: 100%;">



</div>

</body>

</html>

<script>

var Par = document.getElementById("loop");

function addRow()

{

	var valL="数据库绑定数据左"; //<%=rs("anclass")%>

	var valR="数据库绑定数据右"; //<%=rs("anclass")%>

	var divs=2;//自定义循环多少行(两个DIV一行)

	for(var i=0;i<divs;i++)

	{

    //左DIV

	var boxL = document.createElement("div");

	

	boxL.style.width = "356"+"px";

	boxL.style.lineHeight = "25"+"px";

	boxL.style.border = "1px solid #999999";

	boxL.style.styleFloat  = "left";

	boxL.style.fontSize = "12";

	boxL.style.textAlign = "center";

	//boxL.innerHTML="<font color=red>i'm left DIV</font>";

	boxL.innerHTML="<font color=red>"+valL+"</font>";

	//右DIV

	var boxR = document.createElement("div");

	boxR.style.width = "356"+"px";

	boxR.style.lineHeight = "25"+"px";

	boxR.style.border = "1px solid #999999";

	boxR.style.styleFloat = "right";

	boxR.style.fontSize = "12";

	boxR.style.textAlign = "center";

	boxR.innerHTML="<font color=red>"+valR+"</font>";



	var blank = document.createElement("div")

	blank.style.fontSize="2px";

	blank.style.width="720px";

	Par.appendChild(boxR);

    Par.appendChild(boxL);

	Par.appendChild(blank);

	

	boxL = null;

	boxR = null;

	blank=null;

	i=i+1

	}

	



}

</script>