首页 > 试题广场 >

请根据下面的HTML和CSS代码，画出布局示意图。

[问答题]
请根据下面的HTML和CSS代码，画出布局示意图 
<div id="page"> 
    <div class="main">
        <div class="sub"></div>
    </div> 
    <div class="nav"></div> 
</div>
<style type="text/css"> 
    #page { width: 520px; } 
    .nav  { width: 200px; float: right; } 
    .main { width: 200px; float: left; padding-left: 110px; }     
    .sub  { width: 100px; float: left; margin: 10px 0 10px -100px; }     
    .main { border: 1px solid #000; }
    .nav, .sub { border: 1px dashed #000; height: 300px; }     
    .sub { height: 280px; } 
</style>
添加回答
推荐
胡原头像 胡原
编辑于 2015-02-04 20:18:24 回复(0)
阿琛Bonnie头像 阿琛Bonnie
关于float,我现在领悟到几点规律，大家看看对不对,欢迎大家指出错误：
1.  定义了float的元素是在父元素的内容区域浮动。若父元素有padding,则在除去padding部分的部分浮动。
2.  定义了float的元素就是离开文档流了，和同级元素没关系，就是以父元素为标准浮动，无论父元素本身是如何定位的。
发表于 2016-04-16 00:13:30 回复(0)
一光年_sunshine头像 一光年_sunshine
为什么main元素的宽度不是200 而变大了 貌似是310？
发表于 2016-09-03 15:15:23 回复(1)
傻木木头像 傻木木
为啥margin-left未生效？
发表于 2015-08-18 12:02:53 回复(2)
南音头像 南音
<img src="http://uploadfiles.nowcoder.com/images/20150817/690576_1439802554440_AF0168A4300C25250F2C819242055016" alt="" />
发表于 2015-08-17 17:09:28 回复(0)
牛客224199号头像 牛客224199号
为什么没有办法画图，只能把代码给写上了
发表于 2014-12-22 21:08:51 回复(0)
字母-if头像 字母-if
发表于 2014-11-29 23:05:28 回复(0)
牛客392414号头像 牛客392414号
发表于 2014-11-27 21:44:06 回复(0)
wingzero头像 wingzero




发表于 2014-11-21 18:46:18 回复(0)
比目小鱼鱼头像 比目小鱼鱼
发表于 2014-11-20 11:21:46 回复(0)
满天都是小星星°头像 满天都是小星星°
发表于 2014-11-19 17:18:45 回复(0)
小睿瑞头像 小睿瑞
发表于 2014-11-12 16:08:56 回复(0)
Jeason头像 Jeason

发表于 2014-11-10 14:34:20 回复(0)
William梓峰头像 William梓峰


发表于 2014-11-06 11:08:16 回复(0)
极暮头像 极暮




发表于 2014-11-05 14:06:52 回复(0)
小小李头像 小小李
<!html DOCTYPE>
    <head></head>
<body>
    <div id="page">
        <div class="mian"></div>
        <div class="nav"></div>
        <div class="sub"></div>
    </div>
</body>
<html>
发表于 2014-11-05 08:34:20 回复(0)
好奇猫头像 好奇猫
发表于 2014-11-04 09:54:48 回复(1)
好奇猫头像 好奇猫
发表于 2014-11-04 09:54:48 回复(0)
提交观点

问题信息

前端工程师 阿里巴巴 HTML 2011
来自：阿里巴巴2011前端工...
上传者：佐屋野
难度：
18条回答 12721浏览

热门推荐

相关试题

扫一扫，把题目装进口袋

求职之前，先上牛客

扫描二维码，进入QQ群

扫描二维码，关注牛客公众号