Html CSS，显示内联和三个 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/785211/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS, display inline and three divs
提问by VansFannel
I have this HTML code:
我有这个 HTML 代码：
<body>
<div id="div0" style="display:inline; background-color:green; width:100%">
<div id="div1" style="display:inline; background-color:aqua;width:33%"> </div>
<div id="div2" style="display:inline; background-color:red;width:33%"> </div>
<div id="div3" style="display:inline; background-color:yellow;width:33%"> </div>
</div>
</body>
I want to fill the page with div1, div2and div3but they don't fill the entire width.
我想用div1、div2和div3填充页面，但它们没有填充整个宽度。
What it's happening?
这是怎么回事？
回答by roryf
Taken from display declaration:
取自显示声明：
display: inlinemeans that the element is displayed inline, inside the current block on the same line. Only when it's between two blocks does the element form an 'anonymous block', that however has the smallest possible width.
display: inline表示该元素内联显示，位于同一行的当前块内。只有当它在两个块之间时，元素才会形成一个“匿名块”，但是它的宽度尽可能小。
You cannot give an inline element set width or height dimensions, they will be ignored. An element must have a display type of blockto do that. Setting display: blockhowever will not achieve what you want since each element will fill the entire width. float: leftwill cause them to stack to the left and also forces display: block.
您不能给内联元素设置宽度或高度尺寸，它们将被忽略。一个元素必须有一个显示类型block才能做到这一点。display: block但是，设置不会达到您想要的效果，因为每个元素都将填充整个宽度。float: left将导致它们向左堆叠并强制display: block.
<head>
<style type="text/css">
#wrap {
width:100%;
}
#wrap:after {
/* Prevent wrapper from shrinking height,
see http://www.positioniseverything.net/easyclearing.html */
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#wrap .container {
float: left;
width:33%;
}
</style>
</head>
<body>
<div id="wrap">
<div class="container"> </div>
<div class="container"> </div>
<div class="container"> </div>
</div>
</body>
Mmmmm, semantics
嗯，语义
See answer from Phunkyfor further comments on floating.
有关浮动的进一步评论，请参阅Phunky 的回答。
回答by Tomalak
Use relative positioning on the outer <div>and float the inner <div>s. Don't use display: inline.
在外部使用相对定位<div>并浮动内部<div>s。不要使用display: inline.
<body>
<div id="div0" style="border: 1px solid red; background-color: green; width: 100%; position: relative;">
<div id="div1" style="background-color: aqua; width: 33.33%; float: left;">a</div>
<div id="div2" style="background-color: red; width: 33.33%; float: left;">b</div>
<div id="div3" style="background-color: yellow; width: 33.33%; float: left;">c</div>
</div>
</body>
回答by annakata
display:inlineshrink wraps the content. You might want to try float:leftinstead.
display:inline收缩包装内容。您可能想尝试一下float:left。
回答by Phunky
Rory Fitzpatrick more or less has the ideal answer for you, although there is no need to set pos:rel on the #wrapper as it is already a relative block element and will span the full width by default.
Rory Fitzpatrick 或多或少为您提供了理想的答案，尽管没有必要在 #wrapper 上设置 pos:rel 因为它已经是一个相对块元素并且默认情况下将跨越整个宽度。
When you float a block element it mimics the alignment functionality of display:inline and in an ideal world we would have access to the very useful display:inline-block which would have done exactly what you was expecting it to do.
当您浮动块元素时，它模仿了 display:inline 的对齐功能，在理想的世界中，我们可以访问非常有用的 display:inline-block ，它可以完全按照您的预期完成。
But one thing you should remember when floating elements is that they will only take up the space they require (this includes margin and padding) unless you set a fixed width.
但是当浮动元素时你应该记住的一件事是它们只会占用它们需要的空间（这包括边距和填充），除非你设置一个固定的宽度。
This is why Rory used width:33%; as that is the best you are ever going to get :)
这就是 Rory 使用 width:33% 的原因；因为那是你能得到的最好的 :)
Ideally this would have been a comment on Rorys post, but i've not got a high enough post count yet.
理想情况下，这应该是对 Rorys 帖子的评论，但我的帖子数量还不够高。
回答by ólafur Waage
<body>
<div id="div0" style="float: left; background-color:green; width:100%">
<div id="div1" style="float: left; background-color:aqua;width:33%"> </div>
<div id="div2" style="float: left; background-color:red;width:33%"> </div>
<div id="div3" style="float: left; background-color:yellow;width:33%"> </div>
</div>
</body>
This should work for you. And the reason IIRC is that display: inline does not take % width.
这应该对你有用。IIRC 的原因是 display: inline 不占用 % 宽度。
回答by Fralle
Instead of using float you could use flexbox for a more responsive resizing. Also this forces the elements to remain in a row.
您可以使用 flexbox 来实现更灵敏的调整大小，而不是使用浮动。这也迫使元素保持连续。
Example:
例子：
<head>
<style type="text/css">
#wrap {
width:100%;
display:inline-flex;
}
#wrap:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
display: inline-flex;
flex-direction: row;
}
.container1 {
width:20%;
}
.container2{
width:80%;
}
</style>
</head>
<body>
<div id="wrap">
<div class="container1"> </div>
<div class="container2"> </div>
</div>
回答by Dan
The best way to accomplish this, contrary to all the answers given before, can be found referencing the answer to this question:
与之前给出的所有答案相反，最好的方法是参考这个问题的答案：
3 inline-block divs with exactly 33% width not fitting in parent
The quickest and easiest way is not the prettiest to look at (putting your div's on the same line to remove the automatic single white space provided normally), but will work tremendously for what you want. The answer I am referencing list plenty of other way that, in my opinion, are better than any provided before, and address the true problem you are having.
最快和最简单的方法不是最漂亮的（将你的 div 放在同一行以删除通常提供的自动单个空格），但会非常适合你想要的。我引用的答案列出了很多其他方式，在我看来，这些方式比以前提供的任何方式都要好，并且可以解决您遇到的真正问题。
Here is the code working exactly how you'd like, and a link to the fiddle!
这是完全按照您的意愿工作的代码，以及指向小提琴的链接！
<body>
<div id="div0" style="float: left; background-color:green; width: 100%;">
<div id="div1" style="margin: 0px; display: inline-block; background-color:aqua;width:33.33%"> </div><div id="div2" style="margin: 0px; display: inline-block; background-color:red;width:33.33%"> </div><div id="div3" style="margin: 0px; display: inline-block; background-color:yellow;width:33.33%"> </div>
</div>
