我正在创建一个横向分为三个部分的示例网站。 我希望最左边的 div 宽度为 25%，中间的 div 宽度为 50%，右边的宽度为 25%，以便这些分区水平填充所有 100% 的空间。
<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>
当我执行这段代码时，div 出现在彼此之上。我希望它们并排出现!
我该怎么做？
最佳答案
我不会在这种事情上使用 float ；我宁愿使用 inline-block .
还有几点需要考虑:
- 内联样式不利于可维护性
- 选择器名称中不应该有空格
- 您错过了一些重要的 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很好的衡量标准。
关于html - 如何水平放置html中的三个div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11931154/