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

Question

提问by Akhil

I am creating a sample website which has three divisions horizontally. I want the left most div to be 25% width, the middle one to be 50% width, and right to be 25% width so that the divisions fill all the 100% space horizontally.

我正在创建一个示例网站，该网站具有三个水平分区。我希望最左边的 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

When I execute this code, the divs appear over each other. I want them to appear beside each other!

当我执行此代码时，div 会相互重叠。我要他们出现在彼此身边！

How can i do this?

我怎样才能做到这一点？

Answer 1

回答by Jezen Thomas

I'd refrain from using floats for this sort of thing; I'd rather use inline-block.

我不会在这种事情上使用浮点数；我宁愿使用inline-block.

Some more points to consider:

还有一些需要考虑的点：

Inline styles are bad for maintainability
You shouldn't have spaces in selector names
You missed some important HTML tags, like <head>and <body>
You didn't include a doctype

内联样式不利于可维护性
选择器名称中不应有空格
你错过了一些重要的 HTML 标签，比如<head>和<body>
你没有包括 doctype

Here's a better way to format your document:

这是格式化文档的更好方法：

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

Here's a jsFiddlefor good measure.

这是一个很好的衡量标准的jsFiddle。

Answer 2

回答by maazadeeb

I know this is a very old question. Just posting this here as I solved this problem using FlexBox. Here is the solution

我知道这是一个非常古老的问题。当我使用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>

Just had to add display:flexto the container! No floats required.

只需要添加display:flex到容器中！不需要浮标。

Answer 3

回答by Paul Aldred-Bann

You can use floating elementslike so:

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

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

Note the overflow: hidden;on the parent container, this is to make the parent grow to have the same dimensions as the child elements (otherwise it will have a height of 0).

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

Answer 4

回答by Faizal Munna

Most easiest way
I can see the question is answered , I'm giving this answer for the ones who is having this question in future

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

Its not good practise to code inline css , and also IDfor all inner div's , always try to use classfor styling .Using inline css is a very bad practise if you are trying to be a professional web designer.

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

here in your question I have given a wrapper class for the parent div and all the inside div's are child div's in css you can call inner div's using nth-childselector.

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

I want to point few things here

我想在这里指出几点

1 - Do not use inline css ( it is very bad practise )

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

2 - Try to use classes instead of id's because if you give an id you can use it only once, but if you use a class you can use it many times and also you can style of them using that class so you write less code.

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

codepen link for my answer

我的答案的代码笔链接

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

回答by NKCSS

You add a

你添加一个

float: left;

to the style of the 3 elements and make sure the parent container has

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

overflow: hidden; position: relative;

this makes sure the floats take up actual space.

这可以确保浮动占用实际空间。

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

Also please note that the width: 100% and height: 100% need to be removed from the container, otherwise the 3rd block will wrap to a 2nd line.

另请注意，需要从容器中删除 width: 100% 和 height: 100% ，否则第三个块将换行到第二行。

Answer 6

回答by MNilson

Get rid of the position:relative;and replace it with float:left;and float:right;.

摆脱了position:relative;，取而代之的是float:left;和float:right;。

Example in jsfiddle: http://jsfiddle.net/d9fHP/1/

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 如何在html中水平定位三个div？

提问by Akhil

回答by Jezen Thomas

回答by maazadeeb

回答by Paul Aldred-Bann

回答by Faizal Munna

回答by NKCSS

回答by MNilson

相关推荐

最近更新

标签

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

提问by Akhil

回答by Jezen Thomas

回答by maazadeeb

回答by Paul Aldred-Bann

回答by Faizal Munna

回答by NKCSS

回答by MNilson

相关推荐

Html 转到 #div 框 JavaScript

Html 使用 HTML5 CSS3 强制 iframe YouTube 视频居中并在后台完全覆盖屏幕

Html 将图像与同一行文本的左侧对齐 - Twitter Bootstrap3

在 HTML 文本输入中选择文本时更改突出显示颜色

相关推荐

最近更新

标签