如何在 html 中水平定位三个 div？

小开

你可以这样使用浮动元素:

<div id="the whole thing" style="height:100%; width:100%; overflow: hidden;">
<div id="leftThing" style="float: left; width:25%; background-color:blue;">Left Side Menu</div>
<div id="content" style="float: left; width:50%; background-color:green;">Random Content</div>
<div id="rightThing" style="float: left; width:25%; background-color:yellow;">Right Side Menu</div>
</div>

注意父容器上的 溢出: 隐藏;，这是为了使父容器增长到与子元素相同的尺寸(否则它的高度为0)。

小开

添加一个

float: left;

设置为3个元素的样式，并确保父容器具有

overflow: hidden; position: relative;

这样可以确保花车占据实际空间。

<html>
<head>
<title>Website Title </title>
</head>
<body>
<div id="the-whole-thing" style="position: relative; overflow: hidden;">
<div id="leftThing" style="position: relative; width: 25%; background-color: blue; float: left;">
Left Side Menu
</div>
<div id="content" style="position: relative; width: 50%; background-color: green; float: left;">
Random Content
</div>
<div id="rightThing" style="position: relative; width: 25%; background-color: yellow; float: left;">
Right Side Menu
</div>
</div>
</body>
</html>

还请注意: 宽度: 100% 和高度: 100% 需要从容器中删除，否则第3块将包装到第2行。

小开

去掉 position:relative;，代之以 float:left;和 float:right;。

Jsfiddle 中的示例: http://jsfiddle.net/d9fHP/1/

        <html>
<title>
Website Title </title>
<div id="the whole thing" style="float:left; height:100%; width:100%">
<div id="leftThing" style="float:left; width:25%; background-color:blue;">
Left Side Menu
</div>
<div id="content" style="float:left; width:50%; background-color:green;">
Random Content
</div>
<div id="rightThing" style="float:right; width:25%; background-color:yellow;">
Right Side Menu
</div>
</div>
</html>

小开

最佳答案

对于这类事情，我不会使用 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。

小开

我知道这是个很古老的问题。只是张贴在这里，因为我解决了这个问题使用 FlexBox。这就是解决办法

#container {
height: 100%;
width: 100%;
display: flex;
}
#leftThing {
width: 25%;
background-color: blue;
}
#content {
width: 50%;
background-color: green;
}
#rightThing {
width: 25%;
background-color: yellow;
}

<div id="container">


<div id="leftThing">
Left Side Menu
</div>


<div id="content">
Random Content
</div>


<div id="rightThing">
Right Side Menu
</div>


</div>

只需要将 display:flex添加到容器中! 不需要浮动。

小开

最简单的方法

我可以看到这个问题的答案，我给这个答案的人谁是有这个问题的未来

对内联 css 编写代码是不好的做法，对所有内部 div 编写代码编写代码编写代码编写代码编写代码编写代码编写代码编写代码编写代码编写代码编写代码编写代码编写代码编写代码编写代码编写代码编写代码编写代码编写代码编写代码编写代码编写代码编写代码编写代码编写代码。如果你想成为一个专业的网页设计师，使用内联 css 是一个非常糟糕的做法。

在你的问题里我已经为父 div 给出了一个包装类，所有的内部 div 都是 css 中的子 div，您可以使用 第 N 个孩子选择器调用内部 div。

我想在这里指出一些事情

不要使用内联 css (这是非常糟糕的做法)
尝试使用类来代替 id，因为如果你给出一个 id，你只能使用一次，但是如果你使用一个类，你可以使用它很多次，你也可以使用这个类来设计它们的样式，这样你就可以编写更少的代码。

我的答案的代码链接

Https://codepen.io/feizel/pen/jelgyb

.wrapper {
width: 100%;
}


.box {
float: left;
height: 100px;
}


.box:nth-child(1) {
width: 25%;
background-color: red;
}


.box:nth-child(2) {
width: 50%;
background-color: green;
}


.box:nth-child(3) {
width: 25%;
background-color: yellow;
}

<div class="wrapper">
<div class="box">
Left Side Menu
</div>
<div class="box">
Random Content
</div>
<div class="box">
Right Side Menu
</div>
</div>