如何在html中水平放置三个div？_Html_Css_Layout_Position

如何在html中水平放置三个div？

html css layout

如何在html中水平放置三个div？,html,css,layout,position,Html,Css,Layout,Position,我正在创建一个样本网站，横向上有三个部分。我希望最左边的div是25%的宽度，中间的是50%的宽度，右边是25%的宽度，这样分区水平地填充所有100%的空间 <html> <title> Website Title </title> <div id="the whole thing" style="height:100%; width:100%" > <div id="leftThing"

我正在创建一个样本网站，横向上有三个部分。我希望最左边的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>


网站标题
左侧菜单
随机内容
右侧菜单

当我执行这段代码时，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%需要从容器中移除，否则第三个块将包裹到第二行。

去掉

位置：相对

并将其替换为

浮动：左和<代码>浮动：右侧
JSFIDLE中的示例：

网站标题
左侧菜单
随机内容
右侧菜单

我不想在这类事情上使用浮点数；我宁愿使用内联块

还有一些需要考虑的问题：

内联样式不利于可维护性
选择器名称中不应该有空格
您遗漏了一些重要的HTML标记，如
和
您没有包含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>


网站标题
*{边距：0；填充：0；}
#容器{高度：100%；宽度：100%；字体大小：0；}
#左、中、右{显示：内联块；*显示：内联；缩放：1；垂直对齐：顶部；字体大小：12px；}
#左{宽度：25%；背景：蓝色；}
#中间{宽度：50%；背景：绿色；}
#右{宽度：25%；背景：黄色；}
左侧菜单
随机内容
右侧菜单

这里有一个很好的衡量标准。
我知道这是一个非常古老的问题。当我使用解决此问题时，将此贴在这里。这是解决办法

#容器{
身高：100%；
宽度：100%；
显示器：flex；
}
#左撇子{
宽度：25%；
背景颜色：蓝色；
}
#内容{
宽度：50%；
背景颜色：绿色；
}
#正确的{
宽度：25%；
背景颜色：黄色；
}

左侧菜单
随机内容
右侧菜单

最简单的方法

我可以看到这个问题已经得到了回答，我将为那些将来有这个问题的人提供这个答案

编写内联css是不好的做法，而且对于所有内部div，总是尝试使用类进行样式设置。如果你想成为一名专业的网页设计师，使用内联css是一种非常糟糕的做法
这是你的问题
我为父div提供了一个包装类，所有内部div都是css中的子div，您可以使用nth child选择器调用内部div
我想在这里指出几点
1-不要使用内联css（这是非常糟糕的做法）
2-尝试使用类而不是id，因为如果你给出一个id，你只能使用它一次，但是如果你使用一个类，你可以多次使用它，而且你可以使用该类来设置它们的样式，这样你就可以编写更少的代码

代码笔链接我的答案



左侧菜单
随机内容
右侧菜单
给左div设置“float:left”样式，给右div设置“float:right”样式。让它们向左浮动，它们将相互堆叠。但是，我不确定%-宽度是否仍然适用，您应该测试一下。@user1594853如果答案对您有帮助，请将其标记为已接受。在阅读您的答案8年后，我终于理解了@Jezen Thomas的可能副本：）虽然float是正确的，但我不建议“HTML新手”开始使用内联CSS。编辑：注意到现在他已经在使用内联CSS了，我还是建议一个更好的解决方案。@powerbuoy同意，不建议使用内联CSS。这将从包含的CSS文件中完成，其中样式通过id（#leftThing{float:left；}）、选择器或类名绑定。建议从内联CSS切换。我还要指出，“left”、“middle”和“right”是非常糟糕的ID（或类名），因为它们与布局直接相关，而不是它们的含义。此外，我不建议将内联块用于此超浮点
。内联块
元素受字母间距
和字体大小
（等）的影响，这使得它们更难对齐（一种解决方案是在#container
上设置字体大小：0
，然后在#container*中将其设置回正常状态。“您遗漏了一些重要的HTML标记，如和”这几天从技术上讲没什么问题…：
        <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>

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



            .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; 
            }