打印

[讨论] CSS布局实验题一（检验CSS布局灵活性）

kometo [楼主]

初级会员

帖子: 66
体力: 154
威望: 0
离线: 109 天

1^# 大中小发表于 2007-6-23 01:42

提倡使用CSS+div布局的一个重要理由是：

可以在不改变内容的情况下改变内容的表现形式，既：内容与表现分离

另外还有一个说法是：

表格可以做到的CSS+div也可以做到

为检验以上两条观点，同时也是为了解决我遇到的一个问题，请大家尝试能不能解决下面的问题：

需求：
针对这一段给定的内容代码

提示：您可以先修改部分代码再运行

实现下面的表格布局效果

提示：您可以先修改部分代码再运行

要求：
1.除附加的CSS代码外，不要改动内容代码。
2.最终实现效果要与表格布局效果相同，包括自适应窗口大小。
3.兼容大部分浏览器。

6.23 补充
1、如果认为要求太苛刻，可以改动内容代码，但请注明
2、为保持客观，已对标题做了修改

补充说明2
1、示例中所使用的表格仅仅是为了布局设计
2、1-6是平等关系的相同特性的内容
3、有没有办法使用Div+CSS实现这个表格布局的全部特性?并兼容大部分浏览器
4、如果没有,那么我应该选择：
A:为了严格使用CSS+Div布局而修改我的布局设计
B:使用Table来完成这个布局

[ 本帖最后由 kometo 于 2007-6-26 00:36 编辑 ]

Anti W3C

TOP

做西部数码代理.Cn1元国际45元 | 将虚拟化进行到底

Idoit

猩猩点灯

高级会员

帖子: 1005
体力: 739
威望: 22
当前: 江苏南京
离线: 10 天

2^# 大中小发表于 2007-6-23 02:44

占个位，我是写不出来，条件太苛刻了,等待牛人出现

裸奔也是一种美

TOP

美橙vps独立IP月付189元

zhangjiewx

中级会员

帖子: 129
体力: 206
威望: 0
当前: 广东深圳

3^# 大中小发表于 2007-6-23 09:42

像导航的布局。。。

TOP

请大家尊重和保护奥运知识产权。

badwish

做个好人

银牌会员

帖子: 1137
体力: 1179
威望: 0
当前: 广东东莞
离线: 13 天

专长 前端制作,ASP,.NET

4^# 大中小发表于 2007-6-23 10:05

楼主看你的表格把第一个单元格中的 1 变成 111111 ，看看有什么变化。

我写的垃圾代码。
因为你限止了只用这些代码，我就只模仿这些了。

提示：您可以先修改部分代码再运行

这样？

提示：您可以先修改部分代码再运行

[ 本帖最后由 badwish 于 2007-6-23 10:46 编辑 ]

我不去当和尚，是因为我已看破了红尘！

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

raynal

格利

中级会员

帖子: 202
体力: 419
威望: 6
当前: 上海杨浦
离线: 60 天

5^# 大中小发表于 2007-6-23 10:06

放弃- -

[ 本帖最后由 raynal 于 2007-6-23 10:11 编辑 ]

TOP

leafage2006

玉小叶

中级会员

帖子: 354
体力: 274
威望: 10
当前: 上海徐汇

6^# 大中小发表于 2007-6-23 10:29

提示：您可以先修改部分代码再运行

学佛就是在学做人而已。

TOP

phantom

林小志

版主

帖子: 1434
体力: 1685
威望: 4
当前: 广东深圳

专长 网页设计,前端制作

7^# 大中小发表于 2007-6-23 10:48

提示：您可以先修改部分代码再运行

最后说一下，没检测其他浏览器，只在IE6下看了下。
还有要跟LZ说一下的就是。该用什么标签的时候就用什么标签，不要把DIV当表格用！

重构页面之前先重构自我

TOP

hubird

中级会员

帖子: 314
体力: 268
威望: 0
离线: 24 天

8^# 大中小发表于 2007-6-23 16:06

表格可以做到的CSS+div也可以做到
这种说法应该是说表格布局能做到的 div+css也能做到吧，并且要简单的多。不过你要求的那个明显是用table方便些非要用div来，是不是觉得很闲啊。

TOP

kometo [楼主]

初级会员

帖子: 66
体力: 154
威望: 0
离线: 109 天

9^# 大中小发表于 2007-6-23 16:16

4楼  badwish
  方案1 使用的绝对宽度不符合
  方案2 使用的相对宽度，但间距也是相对宽度控制不符合
[i]    题外话：但是我注意到当在margin中使用%的相对宽度时，即使容器的宽高不同，但相同比例的Margin所得到的值是相同的。
   因此对使用%控制margin时，margin是如何计算的还需要进一步研究[/i]

6楼 leafage2006
  使用的绝对宽度不符合

7楼 phantom
  使用border来变相控制间距，但实际和使用margin并没有什么不同，
  虽然表面看起来效果很接近，但是实际宽度控制不精确，<li>实际并没有填满<div id=list>的布局空间，给<div>加个背景就看出来了，如下：

提示：您可以先修改部分代码再运行

引用:

还有要跟LZ说一下的就是。该用什么标签的时候就用什么标签，不要把DIV当表格用！

"该用什么标签的时候就用什么标签",这句话说起来容易，做起来难，什么时候该用？就像"该出手时就出手"

我主贴所使用的表格布局实际上很多首页布局可能会用到，比如：连续的X篇文档摘要或者连续的X个栏目的文档列表等等

继续等待进一步的讨论

[ 本帖最后由 kometo 于 2007-6-23 16:35 编辑 ]

Anti W3C

TOP

badwish

做个好人

银牌会员

帖子: 1137
体力: 1179
威望: 0
当前: 广东东莞
离线: 13 天

专长 前端制作,ASP,.NET

10^# 大中小发表于 2007-6-23 16:18

看起来，楼主忽视了table 里<tbody></tbody>标签了。

我不去当和尚，是因为我已看破了红尘！

TOP

kometo [楼主]

初级会员

帖子: 66
体力: 154
威望: 0
离线: 109 天

11^# 大中小发表于 2007-6-23 16:33

引用:

原帖由 badwish 于 2007-6-23 16:18 发表
看起来，楼主忽视了table 里<tbody></tbody>标签了。

对于这个讨论有影响吗？
愿闻其详

Anti W3C

TOP

phantom

林小志

版主

帖子: 1434
体力: 1685
威望: 4
当前: 广东深圳

专长 网页设计,前端制作

12^# 大中小发表于 2007-6-23 16:35

LZ很小心嘛，这样就检测了，不过不知道这个有意义否。再根据你的标题来说[讨论] CSS布局实验题（检验所谓的CSS布局灵活性）。

DIV现在大家只用来布局用的，而table的任务是二维数据，何必拿他们做比较呢？
如8楼hubird所说的，何必呢。

现在我们只是在把以前用table布局的观念转换，而不是说放弃table，而去用li啊div之类的代替table，那是不现实的。table中还有很多可用的标签，在表现数据的时候很方便~

重构页面之前先重构自我

TOP

badwish

做个好人

银牌会员

帖子: 1137
体力: 1179
威望: 0
当前: 广东东莞
离线: 13 天

专长 前端制作,ASP,.NET

13^# 大中小发表于 2007-6-23 16:40

<tbody>这个东西楼主要有兴趣可以去查一下，没兴趣就算了，它是表格一个隐藏的标签，也就是说表格的标签实际上是四层的。

原来楼主这样改了表格的宽度呀？
呵呵。。。。

[ 本帖最后由 badwish 于 2007-6-23 16:43 编辑 ]

我不去当和尚，是因为我已看破了红尘！

TOP

kometo [楼主]

初级会员

帖子: 66
体力: 154
威望: 0
离线: 109 天

14^# 大中小发表于 2007-6-23 16:50

我主贴所使用的表格布局实际上很多首页布局可能会用到，比如：连续的X篇文档摘要或者连续的X个栏目的文档列表等等

我正在设计一个CMS系统的模板，因为希望这个模板尽可能的通用化，并且尽可能的方便修改

现在我有一个首页区域需要显示”连续的X篇文档摘要“，我的问题就在于我究竟该用Div，还是Table?

引用:

表格可以做到的CSS+div也可以做到
这种说法应该是说表格布局能做到的 div+css也能做到吧，并且要简单的多。不过你要求的那个明显是用table方便些非要用div来，是不是觉得很闲啊。

hubird的表述和我的表述根本区别在于：hubird使用的"表格布局"这个概念，而我使用的时”表格“

请问我主贴中使用的表格示例超出了"表格布局"的范畴了吗？

Anti W3C

TOP

old9

银牌会员

帖子: 579
体力: 954
威望: 87
当前: 安徽合肥

专长 网页设计,前端制作,AS

15^# 大中小发表于 2007-6-23 16:58

楼主给出的 html 结构应该和 table 结构相同，才具有可比性。
table是
<1>
<2>
      <3>
</2>
<2>
      <3>
</2>
</1>

而html却是
<1>
<2>
      <3>
</2>
</1>

表格可以做到的CSS+div也可以做到，但结构也应该相当吧？
你干脆只写个<div>1 2 3 4 5 6</div> 来让我们实现你的效果得了。

http://old9.blogsome.com 已被 GFW 封锁

TOP

kometo [楼主]

初级会员

帖子: 66
体力: 154
威望: 0
离线: 109 天

16^# 大中小发表于 2007-6-23 17:07

引用:

原帖由 old9 于 2007-6-23 16:58 发表
楼主给出的 html 结构应该和 table 结构相同，才具有可比性。

好我接受建议，可以"更改内容代码"，请在回帖中注明是否更改了内容代码。

不过这也意味着放弃了提倡使用CSS+div布局的一个重要理由“可以在不改变内容的情况下改变内容的表现形式，既：内容与表现分离”
至少也是部分放弃把。

或者也许有人可以给出一个标准化的内容代码编写格式，以适应尽可能多的表现需求，如果这样是最好的了！

Anti W3C

TOP

old9

银牌会员

帖子: 579
体力: 954
威望: 87
当前: 安徽合肥

专长 网页设计,前端制作,AS

17^# 大中小发表于 2007-6-23 17:28

引用:

不过这也意味着放弃了提倡使用CSS+div布局的一个重要理由“可以在不改变内容的情况下改变内容的表现形式，既：内容与表现分离”
至少也是部分放弃把。

不是很理解你的逻辑。
我不觉得“保持结构代码一致”的要求意味着放弃了“结构表现分离”，恰恰相反，这种要求正是基于结构表现分离的——结构一致，样式不同。

好吧，先不改你的代码：

提示：您可以先修改部分代码再运行

结构代码改为和表格一致：
<div id="list">
<div>
   <p>1</p>
   <p>2</p>
   <p>3</p>
</div>
<div>
   <p>4</p>
   <p>5</p>
   <p>6</p>
</div>
</div>

请使用标准兼容浏览器：

提示：您可以先修改部分代码再运行

CSS 的种种优势，需要浏览器支持才能发挥出来，这也是为什么我们不喜欢 IE 的原因。

http://old9.blogsome.com 已被 GFW 封锁

TOP

十字路口

银牌会员

帖子: 1006
体力: 2800
威望: 0
离线: 27 天

18^# 大中小发表于 2007-6-23 17:29

web2.0并不是完全拋棄表格。改用表格的地方還是要用表格。

www.grkei.com

TOP

old9

银牌会员

帖子: 579
体力: 954
威望: 87
当前: 安徽合肥

专长 网页设计,前端制作,AS

19^# 大中小发表于 2007-6-23 17:32

楼上，本帖楼主的意思应该是仅仅局限于 CSS 功能性的讨论，而用表格还是用别的标签，属于 HTML 语义的问题，应该不是本帖讨论的范围了。
另外，这里也没有人说要抛弃表格，也没人提到 web 2.0。

http://old9.blogsome.com 已被 GFW 封锁

TOP

kometo [楼主]

初级会员

帖子: 66
体力: 154
威望: 0
离线: 109 天

20^# 大中小发表于 2007-6-23 17:51

引用:

原帖由 old9 于 2007-6-23 17:28 发表

不是很理解你的逻辑。
我不觉得“保持结构代码一致”的要求意味着放弃了“结构表现分离”，恰恰相反，这种要求正是基于结构表现分离的——结构一致，样式不同。

好吧，先不改你的代码：

1、看起来old9的方案好像满足了需求，佩服
不过我发现，解决问题的关键是使用了

复制内容到剪贴板

代码:

   -moz-box-sizing: border-box;

   box-sizing: border-box;

这个属性，我对CSS研究不深，一直没有接触过这个属性。不知在IE或者其他非Mozila浏览器下可行吗？

2、我回答一下old9对我的话的疑问
请问：
如果有一天我希望这个表格状的布局以3行2列出现，那么我应不应该修改内容代码？
换句话说一系列相同特点的内容以几行几列来显示，这个“几行几列”是属于内容的范畴还是表现的范畴？

3、old9的代码启发了我，我想也许可以使用负值的margin来解决，等一下测试以下。

...尝试了，没能解决

[ 本帖最后由 kometo 于 2007-6-23 18:12 编辑 ]

Anti W3C

TOP

old9

银牌会员

帖子: 579
体力: 954
威望: 87
当前: 安徽合肥

专长 网页设计,前端制作,AS

21^# 大中小发表于 2007-6-23 20:44

1、box-sizing 是 CSS3 的属性，标准兼容浏览器多数已经支持，mozilla 是用的专有属性 -moz-box-sizing 来实现。
IE ？？慢慢等吧…… 不过恰好 IE 在 quirks 模式下的 box-sizing 就是 border-box，所以这里取了个巧。

2、如果是数据表，几行几列就是属于结构的范畴，应该修改结构层代码。
如果不是数据表，就属于表现的范畴。不应该修改结构层代码。

当然这是理想状况，现实中，由于 CSS 提供的能力也不是无限的，而且浏览器对 CSS 的支持也未必完善，所以未必每次都可以这么完美。

对于你的例子，如果你的 table 效果如实反映了你的 HTML 语义，也就是说 1、2、3 是一组，4、5、6 是一组，那么当你需要变成三行两列时，显然语义就已经发生了变化，1、2，3、4，5、6 分成了 3 个组，于是结构层代码必然要重写。

如果你例子中的 table 只是用来实现两行三列的布局，也就是说 1-6 都是平等的关系，那么当你需要变成三行两列时，结构层代码不应该重写。于是 ul、li 的结构显然要比 table 更加合理也更加易于修改。

http://old9.blogsome.com 已被 GFW 封锁

TOP

kometo [楼主]

初级会员

帖子: 66
体力: 154
威望: 0
离线: 109 天

22^# 大中小发表于 2007-6-23 23:30

引用:

原帖由 old9 于 2007-6-23 20:44 发表
1、box-sizing 是 CSS3 的属性，标准兼容浏览器多数已经支持，mozilla 是用的专有属性 -moz-box-sizing 来实现。
IE ？？慢慢等吧…… 不过恰好 IE 在 quirks 模式下的 box-sizing 就是 border-box，所以这里取 ...

嗯，说的好，相信old9应该也清楚了我上面所说的

引用:

不过这也意味着放弃了提倡使用CSS+div布局的一个重要理由“可以在不改变内容的情况下改变内容的表现形式，既：内容与表现分离”
至少也是部分放弃把。

另外，在IE下虽然可以用quirks模式来实现，但是我们知道，为了一个局部而启用quirks模式，将会带来整个页面布局的混乱。
好像没有人会用qirks+div+css来进行完整页面的布局设计把，除非不用考虑兼容。

现在回到主贴的问题：
1、主贴所使用的表格仅仅是为了布局设计
2、1-6是平等关系的相同特性的内容
3、有没有办法使用Div+CSS实现这个表格布局的全部特性?并兼容大部分浏览器
4、如果没有,那么我应该选择：
A:为了严格使用CSS+Div布局而修改我的布局设计
B:使用Table来完成这个布局

old9:我很想知道你在实际工作中对这样的布局需求会如何处理？

[ 本帖最后由 kometo 于 2007-6-23 23:35 编辑 ]

Anti W3C

TOP

old9

银牌会员

帖子: 579
体力: 954
威望: 87
当前: 安徽合肥

专长 网页设计,前端制作,AS

23^# 大中小发表于 2007-6-24 14:08

现阶段 CSS 的浏览器支持不完善，如果要考虑浏览器兼容性，那很可能会损失一部分“表格布局的特性”。

实际工作中，我会为了兼容浏览器而抛弃一些我认为无关紧要的、对界面设计没有什么影响的特性，来尽量保证HTML的语义性，也就是说我肯定不会用表格来布局。

对于这个布局，实际工作中我可能会近似处理成这样：

提示：您可以先修改部分代码再运行

http://old9.blogsome.com 已被 GFW 封锁

TOP

kometo [楼主]

初级会员

帖子: 66
体力: 154
威望: 0
离线: 109 天

24^# 大中小发表于 2007-6-24 15:26

引用:

原帖由 old9 于 2007-6-24 14:08 发表
现阶段 CSS 的浏览器支持不完善，如果要考虑浏览器兼容性，那很可能会损失一部分“表格布局的特性”。

实际工作中，我会为了兼容浏览器而抛弃一些我认为无关紧要的、对界面设计没有什么影响的特性，来尽量保 ...

高

昨天我尝试使用负的margin来解决问题，虽然有点突破但最后也没有找出一个满意的方法，今天一看楼上的帖子，柳暗花明...

我参考了old9的思路，改动了一些代码，使结果更加接近示例表格，如下：

<!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>CSS布局实验题</title>
</head>
<body>
<h4>表格布局方式</h4>
<p align="center">
<table width="50%" border="0" align="center" cellpadding="0" cellspacing="5" bgcolor="#00CC33" style="margin:0 auto">
  <tr>
    <td height="50" align="center" bgcolor="#FFFFCC" width="33%">    1</td>
    <td align="center" bgcolor="#FFFFCC" width="33%">      2</td>
    <td align="center" bgcolor="#FFFFCC" width="33%">3</td>
  </tr>
  <tr>
    <td height="50" align="center" bgcolor="#FFFFCC">4</td>
    <td align="center" bgcolor="#FFFFCC">5</td>
    <td align="center" bgcolor="#FFFFCC">6</td>
  </tr>
</table>
&nbsp;</p>
<h4>CSS布局方式</h4>
<style type="text/css">
*{
	margin:0px;
	padding:0px;
}
.list{
	width:50%;
	margin:0 auto;
}
.list ul{
	background-color:#00CC33;
	padding:5px 5px 0 5px;
	overflow:hidden;
        zoom:1;
}
.list ul li{
	display:inline;
	list-style:none;
	float:left;
	width:33.3%;
	background-color:#FFFFCC;
	border:solid #00CC33;
	border-width:5px 0 5px 5px;
	margin:-5px 0 0 -5px;
	height:50px;
	text-align:center;
	line-height:50px;
	
}
</style>
<div class="list">
<ul>
<li>1</li><li>2</li><li>3</li>
<li>4</li><li>5</li><li>6</li>
</ul>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

现在最终结果已经非常接近表格布局所具有的特性了

但还有两点不足：
1、<li>的显示区域右侧实际上有5px被margin给覆盖掉了，如果<li>中的内容复杂，有可能在个别情况下会造成内容显示不全（未经实验证实）！
2、三列实际上并不等宽，最右侧一列要大一点。

如果没有更好的方案或建议，这个帖子可以结贴了。谢谢大家！

说句题外话：“总觉得如此坚持的使用CSS+Div布局有点本末倒置” ！
（牢骚而已，还请不要就此展开讨论；因为1：讨论太多了，2：不要影响了本帖的主题）

[ 本帖最后由 kometo 于 2007-6-24 15:39 编辑 ]

Anti W3C

TOP

jorshen

瞧瞧

中级会员

帖子: 472
体力: 422
威望: 0
离线: 8 天

25^# 大中小发表于 2007-6-25 17:08

提示：您可以先修改部分代码再运行

[ 本帖最后由 jorshen 于 2007-6-25 17:18 编辑 ]

瞧瞧的自留地

TOP

writeidea

鲨鱼

银牌会员

帖子: 481
体力: 1033
威望: 0
当前: 辽宁大连
离线: 10 天

专长 网页设计,前端制作

26^# 大中小发表于 2007-6-25 17:15

是这样吗？

提示：您可以先修改部分代码再运行

DIV+CSS讨论群:13669844和23629301

TOP

kometo [楼主]

初级会员

帖子: 66
体力: 154
威望: 0
离线: 109 天

27^# 大中小发表于 2007-6-25 23:01

25楼的用的是固定宽度
26楼的用的是相对，但间距也是相对的了

看清题，
改变下窗口大小就看出来了

Anti W3C

TOP

badwish

做个好人

银牌会员

帖子: 1137
体力: 1179
威望: 0
当前: 广东东莞
离线: 13 天