Question

我正在创建一个横向分为三个分区的示例网站。我希望最左边的div宽度为25％，中间宽度为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显示在彼此之上。我希望他们出现在彼此旁边！

我该怎么做？

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

Answer 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添加到容器中即可！不需要花车。

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

请注意父容器上的溢出：隐藏; ，这是为了使父成长与子元素具有相同的尺寸（否则它的高度为0）。

Answer 4

最简单的方式
      我可以看到这个问题得到了解答，我正在为将来有这个问题的人提供这个答案

编写内联css以及所有内部div的 ID 都不是很好的做法，总是尝试使用类进行样式化。使用内联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>

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

另请注意，宽度：100％和高度：100％需要从容器中移除，否则第3块将包裹到第2行。

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

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

6 个答案: