大家好,请教一下 Div + CSS 来设计网页布局的问题

[xiaoyan21]

据说为了符合w3c的一系列规范,或者说是为了更好的对显示与控制(MVC?)进行分离,

现要求用Div+css来进行布局,更不再使用Table

用DreamWeaver摆弄了几下总觉得很不理象.

请大家问有没有更好的可视化设计工具,用来设计这种布局??

有没有简单的例子?

|---------------------------|
| | | | |
|---------------------------|
一行内有四个区域


如上的一个布局,用div该如何实现???

谢谢大家,分不够我再加

[以专业开发人员为伍]

早期所谓的Web标准就是把坐标写死，固定Div大小、位置，而不是自动排版和分割。分割空间是table的概念，如果div可以用来自动分割空间布局，那么就等于用div重写写了一个table，那么有什么理由不用table呢？

[以专业开发人员为伍]

注意，所谓的Web标准是一些标准化学会起的名词，是纯学术化的大学教授集合在一起搞的，这样的标准有好几十个，起的名子比较唬人。

[Ivony]

div是块布局BlockLayout，并不是所有表格布局的东西都能用块布局来实现。像你所说的那个，在IE下用display: inline-block样式是比较好的，在Firfox下可以用float: right样式。但建议你认为用块布局合理的时候就用块布局，认为用表格布局合理的时候就用表格布局……

[Edisoncat]

学习,路过

[xiaoyan21]

谢谢楼上两位大侠!

[股神]

帮顶

[hq2008]

g

[cpp2017]

个人认为还是表格布局合理一点．

[孟子E章]

<style>
.div1 {width:200px;float:left;background:red}
.div2 {width:200px;float:left;background:blue}
.div3 {width:200px;float:left;background:green}
.div4 {width:300px;float:left;background:gray}
</style>
<div class="div1">内容1</div>
<div class="div2">内容2</div>
<div class="div3">内容3</div>
<div class="div4">内容4</div>

[游北亮]

我也用TABLE，为什么要用DIV？

[dancewithyou]

了解一下.

[bobomouse]

有用DIV布局的，用DIV灵活一些，而且可以实现用户自定义网页布局。因为层是可以设为可拖动的。

[emanlee]

请看下面的帖子：

主　　题： table布局和div布局相比，哪种好，以及区别，，，
http://community.csdn.net/Expert/topic/5280/5280899.xml?temp=.4758417

[nutpp]

<style>
.div1 {width:200px;float:left;background:red}
.div2 {width:200px;float:left;background:blue}
.div3 {width:200px;float:left;background:green}
.div4 {width:300px;float:left;background:gray}
.DivHack {clear:both}
</style>
<div class="div1">内容1</div>
<div class="div2">内容2</div>
<div class="div3">内容3</div>
<div class="div4">内容4</div>
<div class="DivHack"></div>

[hertcloud]

不能用% 真是不爽.

[ICeeYeS]

在blueidea上有个专门的介绍。你可以找来看看。

[OmT]

采用DIV+CSS优点多多,上面布局可以这样写


<style>
.area
{
width:200px;
float:left;
}
</style>

<ul>
<li class="area">区域1</li>
<li class="area">区域2</li>
<li class="area">区域3</li>
<li class="area">区域4</li>
</ul>

[curd0468]

现用dreamweaver画好线,然后网上找个漂亮的网页把CSS拿过来改一下,搞定

[luck0235]

<style>
.item{
width:200px;
height:200px;
float:left;
}
</style>

<div class="item">
<div class="item">
<div class="item">
<div class="item">