- <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。
