70

我正在创建一个横向具有三个部分的示例网站。我希望最左边的 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 会彼此重叠。我希望他们出现在彼此旁边！

我怎样才能做到这一点？

4

6 回答 6

50

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

于 2012-08-13T09:21:06.810 回答
40

我知道这是一个非常古老的问题。当我使用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到容器中！不需要花车。

于 2016-10-24T03:07:22.883 回答
19

您可以像这样使用浮动元素：

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

于 2012-08-13T09:09:22.197 回答
11

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

编写内联 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>
于 2017-02-01T17:21:37.857 回答
8

你添加一个

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

于 2012-08-13T09:12:28.030 回答
1

去掉并用andposition: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>​
于 2012-08-13T09:12:47.687 回答