<html> <title> Website Title </title> <div id="the whole thing" style="height:100%; width:100%" > <div id="leftThing" style="position: relative; width:25%; background-color:blue;"> Left Side Menu </div> <div id="content" style="position: relative; width:50%; background-color:green;"> Random Content </div> <div id="rightThing" style="position: relative; width:25%; background-color:yellow;"> Right Side Menu </div> </div> </html>
大家好，
我是一个html新手！
我正在创建具有三个部门的示例网站。
我想要的最左边的div宽度为25％，中间的宽度为50％，右边的宽度为25％，以便分隔线将所有100％的空间水平地填满。
当我执行这个代码时，div会相互出现。我希望他们出现在彼此旁边！
我怎么能这样做？
谢谢
解决方法
我不会使用漂浮物做这种事情;我宁愿使用内嵌块。
还有几点要考虑：
>内联样式不利于维护
>您不应该在选择器名称中有空格
>您错过了一些重要的HTML标签，例如< head>和< body>
>你没有包括一个doctype
这是格式化文档的更好方法：
<!DOCTYPE html>
<html>
<head>
<title>Website Title</title>
<style type="text/css">
* {margin: 0; padding: 0;}
#container {height: 100%; width:100%; font-size: 0;}
#left,#middle,#right {display: inline-block; *display: inline; zoom: 1; vertical-align: top; font-size: 12px;}
#left {width: 25%; background: blue;}
#middle {width: 50%; background: green;}
#right {width: 25%; background: yellow;}
</style>
</head>
<body>
<div id="container">
<div id="left">Left Side Menu</div>
<div id="middle">Random Content</div>
<div id="right">Right Side Menu</div>
</div>
</body>
</html>
这是一个很好的措施jsFiddle。
