当前位置：首页 → 问答吧 → 【已解决】960宽度下，一排四个div，如何布局才能正好左右对齐？

【已解决】960宽度下，一排四个div，如何布局才能正好左右对齐？

时间：2011-07-15

来源：互联网

960宽度下，一排四个div，如何布局才能正好左右对齐（不留间距）？
如图，大家应该明白的

已经解决：http://bbs.blueidea.com/thread-2876055-1-1.html

<!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> <style type="text/css">  </style> </head> <body> <div class="box"> <div class="smallbox">这是一个div</div> <div class="smallbox">这是一个div</div> <div class="smallbox">这是一个div</div> <div class="smallbox">这是一个div</div> </div> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 aisiyu 于 2011-7-16 00:24 编辑 ]

附件

未命名-8.gif (6.9 KB)

2011-7-15 21:59

作者: aisiyu 发布时间: 2011-07-15

可参考此页：
http://960.gs/demo.html

附件

Untitled-1.png (36.02 KB)

2011-7-15 22:28

作者: alphat 发布时间: 2011-07-15

楼上朋友
看不懂

作者: aisiyu 发布时间: 2011-07-15

两种方法：
1：

<!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> <style type="text/css">  </style> </head> <body> <div class="box"> <div class="smallbox">这是一个div</div> <div class="smallbox">这是一个div</div> <div class="smallbox">这是一个div</div> <div class="smallbox last">这是一个div</div> </div> </body> </html>
提示：您可以先修改部分代码再运行

作者: alphat 发布时间: 2011-07-15

<!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> <style type="text/css">  </style> </head> <body> <div class="box"> <div class="inner"> <div class="smallbox">这是一个div</div> <div class="smallbox">这是一个div</div> <div class="smallbox">这是一个div</div> <div class="smallbox">这是一个div</div> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

作者: alphat 发布时间: 2011-07-15

谢谢楼上
方法2较好

作者: aisiyu 发布时间: 2011-07-16