如何水平定位html中的三个div？答案

【问题标题】：How to position three divs in html horizontally?如何水平定位html中的三个div？
【发布时间】：2012-08-09 11:54:53
【问题描述】：

我正在创建一个横向分为三个部分的示例网站。我希望最左边的 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>

http://imgur.com/j4cJu

当我执行此代码时，这些 div 会相互重叠。我希望它们出现在彼此旁边！

我该怎么做？

【问题讨论】：

将左侧 div 设置为“float:left”，将右侧 div 设置为“float:right”。
让它们向左浮动，它们将彼此堆叠。但是，我不确定 %-width 是否仍然会被应用，你应该测试一下。
@user1594853 如果回答对您有帮助，请将其标记为已接受。
CSS - Make divs align horizontally的可能重复
@Jezen Thomas 看了你8年的回答，我终于明白了:)

标签： html css layout position

【解决方案1】：

我会避免在这类事情上使用花车；我宁愿使用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 以供参考。

【讨论】：

很高兴您建议从内联 CSS 切换。我还需要指出，“左”、“中”和“右”是真正错误的 ID（或类名），因为它们与它们的布局直接相关，而不是它们的含义。另外，我不推荐inline-block 超过float。 inline-block 元素受到 letter-spacing 和 font-size （等）的影响，这使得它们更难以排列（一种解决方案是在 #container 上设置 font-size: 0，然后在 #container * 中将其设置为正常） .
"你错过了一些重要的 HTML 标签，比如和 " 从技术上讲，这些天没有错...：html.spec.whatwg.org/multipage/syntax.html#optional-tags

【解决方案2】：

我知道这是一个非常古老的问题。在我使用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 添加到容器中！不需要浮点数。

【讨论】：

【解决方案3】：

你可以像这样使用floating elements：

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

注意父容器上的overflow:hidden;，这是为了让父容器增长到与子元素相同的尺寸（否则高度为0）。 p>

【讨论】：

虽然浮动是正确的，但我不建议使用“HTML 新手”来开始使用内联 CSS。编辑：现在注意到他已经在使用内联 CSS，我仍然建议一个更好的解决方案。
@powerbuoy 同意，不推荐内联 CSS。这将通过包含的 CSS 文件完成，其中样式通过 id (#leftThing { float: left; })、选择器或类名绑定。

【解决方案4】：

最简单的方法
我可以看到问题已得到解答，我将为将来有此问题的人提供此答案

编写内联 css 以及所有内部 div 的 ID 都不是好习惯，请始终尝试使用 class 进行样式设置。使用内联 css 是一种非常糟糕的做法如果你想成为一名专业的网页设计师。

在您的问题中我为父 div 提供了一个包装类，所有内部 div 都是 css 中的子 div，您可以使用 nth-child 选择器调用内部 div。

我想在这里指出一些事情

1 - 不要使用内联 css（这是非常糟糕的做法）

2 - 尝试使用类而不是 id，因为如果你提供一个 id，你只能使用一次，但如果你使用一个类，你可以多次使用它，你也可以使用该类来设置它们的样式，这样你就可以编写更少的代码。

我的答案的codepen链接

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>

【讨论】：

【解决方案5】：

你添加一个

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>

另外请注意，width: 100% 和 height: 100% 需要从容器中移除，否则第 3 块将换行到第 2 行。

【讨论】：

【解决方案6】：

去掉 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>

【讨论】：