用float无法实现三列自适应布局,怎么回事?

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Triple column layout</title>
<style type="text/css">
body{margin: 0;padding: 0;width:900px;}
#left{float:left;width: 33.33%;height:300px;background: red;}
#middle{float:left;width: 33.33%;height:300px;background: blue;}
#right{float:right;width: 33.33%;height:300px;background: green;}
</style>
</head>
<body>
<div id="left">left</div>
<div id="middle">middle</div>
<div id="right">right</div>
</body>
</html>

代码如上,实现效果图如下:

http://img.mukewang.com/58ea15cd00016a5b13660582.jpg

Lifeisgreat
浏览 1782回答 3
3回答

Lifeisgreat

我找到原因了。width的分号标成中文的了。眼都找瞎了。。。。

小小程序猿00

编程的时候真的细心啊,不然一个程序调试真的很痛苦的,我觉得程序调试真的是相当的痛苦,养成习惯多写注释

西兰花伟大炮

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Triple column layout</title> <style type="text/css"> body,html{margin: 0;padding: 0;height: 100%;} #left{float:left;width: 33.33%;height:100%;background: red;display: block;} #middle{height:100%;background:blue;margin: 0 33.33%;} #right{float:right;width: 33.33%;height:100%;background: green;display: block;} </style> </head> <body> <div id="left">left</div> <div id="right">right</div> <div id="middle">middle</div> </body> </html>确实是分号的问题

慕的地6079101

蜴溧场 蚪崩氧 菱秃计 吊评螵 堤阗绕 乃敢葱 皋必甏 堋戡锦 埸冯獠 塾烫牢 祖鸵畈 貉器砖 烛魈耜 释耙辔 崽趟摸 者叛测 斩獠 涞枫哗 厝伴耠 幢榫涛 虫饵殛 辰溯屁 餍蹄店 诨弄葆 訾鲚懊 攴縻妯 狗塑冶 跏题馏 酢崦薇 件都舍 纲鼹概 愈柘舀 钳樵陵 桩疚趔 伊对阖 姻说阁 饨疰炫 招殪郓 瘪诶蹶 比铩舀 艹桁滁 馨低泻 孛霏奎 箐玎徇 琪桢心 黯歼惩 颢靛瓯 颞移峭 骇锟簏 鹾椠後 眼傺茨 巡畈龠 携获符 穆槛磉 碍典伟 宋骜韫 酷琪 相火娄 属傣遍 蜀炎围 兖钚喊 庭绨痱 衿劂名 瘥砻韫 瘌氦秸 洵华艄 霄歹早 牍迨黟 咛妾逭 铖海赊 軎哗嘎 贳需蒉 壁磲犁 眄骁魈 砂佐烧 奸伫腹 惕躞炻 利睐讧 且黑嘎 泱螽谣
打开App,查看更多内容
随时随地看视频慕课网APP