在VS2008环境下如何用div+css进行布局？如下图
也就是有个5行3列的div，在vs2008中吧DIV拉进设计面板中时，div的style中怎么设计？也就是说css中的float和clear中具体怎么设置?最好能把#p3...
也就是有个5行3列的div，在vs2008中吧DIV拉进设计面板中时，div的style中怎么设计？也就是说css中的float和clear中具体怎么设置?最好能把#p3，#p4，#p5，#p6，#p7，中的float和clear具体怎么设置？我是菜鸟 刚学用vs做网站，我在这几个部分设置float和clear老是达不到我想要如下图的布局方式，老是弄错的，求助！还有#p3，#p4，#p5，#p6，#p7这几个部分示否要放在同一个div中？
我说的float和clear属性是在div属性面板中style中修改样式里面--布局、定位的float和clear里面要选择的参数，该怎么选才能得到这样的布局？ 展开
我说的float和clear属性是在div属性面板中style中修改样式里面--布局、定位的float和clear里面要选择的参数，该怎么选才能得到这样的布局？ 展开
4个回答
展开全部
还是好好的学一下css+div布局吧！这么规则的布局是比较基础的了：
参考一下这个代码：
<style type="text/css">
.clear{width:100%; height:0px; overflow:hidden; clear:both;}
.m1{width:200px; height:200px; overflow:hidden; background-color:#3D9140;}
.m2{width:200px; height:200px; overflow:hidden; background-color:#A020F0;}
</style>
<body>
<div style="width:1000px; height:100px; background-color:#00cc00;">#p1</div>
<div style="width:1000px; height:100px; background-color:#FF9912;">#p2</div>
<div style="width:1000px; height:auto;">
<div style="width:800px; height:auto; overflow:hidden; float:left;">
<div style="width:200px; height:auto; overflow:hidden; float:left;">
<div class="m2">#3p</div>
<div class="m1">#6p</div>
</div>
<div style="width:600px; height:400px; overflow:hidden; float:right; background-color:#FFD700">#p4</div>
<div class="clear"><!--用来清除浮动 不可见--></div>
</div>
<div style="width:200px; height:auto; overflow:hidden; float:right;">
<div class="m1">#5p</div>
<div class="m2">#7p</div>
</div>
<div class="clear"><!--用来清除浮动 不可见--></div>
</div>
<div style="width:1000px; height:100px; background-color:#EB8E55;">#p8</div>
</body>
尺寸和颜色值自己调一下
参考一下这个代码：
<style type="text/css">
.clear{width:100%; height:0px; overflow:hidden; clear:both;}
.m1{width:200px; height:200px; overflow:hidden; background-color:#3D9140;}
.m2{width:200px; height:200px; overflow:hidden; background-color:#A020F0;}
</style>
<body>
<div style="width:1000px; height:100px; background-color:#00cc00;">#p1</div>
<div style="width:1000px; height:100px; background-color:#FF9912;">#p2</div>
<div style="width:1000px; height:auto;">
<div style="width:800px; height:auto; overflow:hidden; float:left;">
<div style="width:200px; height:auto; overflow:hidden; float:left;">
<div class="m2">#3p</div>
<div class="m1">#6p</div>
</div>
<div style="width:600px; height:400px; overflow:hidden; float:right; background-color:#FFD700">#p4</div>
<div class="clear"><!--用来清除浮动 不可见--></div>
</div>
<div style="width:200px; height:auto; overflow:hidden; float:right;">
<div class="m1">#5p</div>
<div class="m2">#7p</div>
</div>
<div class="clear"><!--用来清除浮动 不可见--></div>
</div>
<div style="width:1000px; height:100px; background-color:#EB8E55;">#p8</div>
</body>
尺寸和颜色值自己调一下
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
晕，还有拿VB做网页呢……
且不说操作如何，即使在VB呈现你想实现的效果，到达浏览器也不好使，这是百分之一百肯定的。为什么？因为没软件可以实现达到那么完善，不然编码人员还有饭吃吗？
不过，还是说一下思路吧，你给的图中，实现的思路：
首先图里的div都放在一个大div中，按你的写法，你可以理解为#p0，呵呵
#p1是header,#p2是nav导航,这两个可以放在一起，也可以分开独立；接着就是中间内容部分，#p3和#6放在一个div,#p4是一个,#p5和#p7放在一起，然后#p8独立一个，一般写法是这样的。
对应的代码其实很简单
#p1,p2,p8宽度都为100%，等于外围最大的DIV宽度，然后可以加一句clear:both;
因为#p3和p6在一个DIV，那个DIV float:left，同理，P4，反过来的是P5P7那个DIV，是float:right。这里一定要加一句clear:right。
再细节化的地方，就需要更多的代码，你现在还是视图拖拽阶段，基本实现就可以了
且不说操作如何，即使在VB呈现你想实现的效果，到达浏览器也不好使，这是百分之一百肯定的。为什么？因为没软件可以实现达到那么完善，不然编码人员还有饭吃吗？
不过，还是说一下思路吧，你给的图中，实现的思路：
首先图里的div都放在一个大div中，按你的写法，你可以理解为#p0，呵呵
#p1是header,#p2是nav导航,这两个可以放在一起，也可以分开独立；接着就是中间内容部分，#p3和#6放在一个div,#p4是一个,#p5和#p7放在一起，然后#p8独立一个，一般写法是这样的。
对应的代码其实很简单
#p1,p2,p8宽度都为100%，等于外围最大的DIV宽度，然后可以加一句clear:both;
因为#p3和p6在一个DIV，那个DIV float:left，同理，P4，反过来的是P5P7那个DIV，是float:right。这里一定要加一句clear:right。
再细节化的地方，就需要更多的代码，你现在还是视图拖拽阶段，基本实现就可以了
追问
不行
追答
嗯……怎么选，我也不知道，没用过VB写HTML
不过之前不是应该说清楚思路了吗，再来一遍？
#P1
#P2
#P3
#P6
#P4
#P5
#P7
#P8
这个结构够清晰理解了吗？是，你问怎么在面板里选，但首先你得保证你“画/拖”出来的DIV是按照这个结构，其次再在面板里选。选有难度吗？
就是选中p3_6那个包裹着P3和P6的DIV，然后选择float:left左浮动，然后p5_7那个选右浮动，clear清除里面选右（我不知道你那儿写什么，反正是右边），然后中间P4选左浮动
理解了吗？不存在不行，实在不行，你就切换到代码，找不到就直接右键你写的文件，用txt记事本打开，修改，没不行的
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
楼主得好好学下DIV+CSS了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
太简单了！多练习一下就知道了！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
