CSS，显示内联和三个div
[英]CSS, display inline and three divs
问题描述
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 , div2 and div3 but they don't fill the entire width. 我想用div1 ， div2和div3填充页面，但它们不会填满整个宽度。
What it's happening? 它发生了什么？
7 个解决方案
解决方案1
14 已采纳 2009-04-24 10:44:00
Taken from display declaration : 取自显示声明 ：
display: inlinemeans that the element is displayed inline, inside the current block on the same line.display: inline表示元素在同一行的当前块内部显示为内联。 Only when it's between two blocks does the element form an 'anonymous block', that however has the smallest possible width.
You cannot give an inline element set width or height dimensions, they will be ignored. 您不能给出内联元素集的宽度或高度尺寸，它们将被忽略。 An element must have a display type of block to do that. 元素必须具有显示类型的block才能执行此操作。 Setting display: block however will not achieve what you want since each element will fill the entire width. 然而，设置display: block将无法实现您想要的效果，因为每个元素将填充整个宽度。 float: left will cause them to stack to the left and also forces display: block . float: left将导致它们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 Phunky for further comments on floating. 有关浮动的进一步评论，请参阅Phunky的回答。
解决方案2
4 2009-04-24 09:53:56
Use relative positioning on the outer <div> and float the inner <div> s. 在外部<div>上使用相对定位并浮动内部<div> 。 Don't use display: inline . 不要使用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>
解决方案3
3 2009-04-24 09:51:00
display:inline shrink wraps the content. display:inline收缩包装内容。 You might want to try float:left instead. 你可能想试试float:left 。
解决方案4
3 2009-04-25 20:05:14
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或多或少都有一个理想的答案，虽然没有必要设置pos：rel在#wrapper上，因为它已经是一个相对的块元素，并且默认会跨越整个宽度。
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，在理想的世界里，我们可以访问非常有用的显示：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%; 这就是为什么罗里使用宽度：33％; as that is the best you are ever going to get :) 因为这是你将得到的最好的:)
Ideally this would have been a comment on Rorys post, but i've not got a high enough post count yet. 理想情况下，这可能是对Rorys帖子的评论，但我还没有足够高的帖子数。
解决方案5
1 2009-04-24 09:49:49
<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的原因是显示：内联不占用％宽度。
解决方案6
0 2014-01-03 18:02:13
Instead of using float you could use flexbox for a more responsive resizing. 您可以使用flexbox进行更灵敏的调整，而不是使用浮动。 Also this forces the elements to remain in a row. 这也迫使元素保持连续。
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>
解决方案7
-1 2017-03-07 19:26:27
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 3个内嵌块div，正好宽度为33％，不适合父级
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. 最快最简单的方法并不是最漂亮的（将你的div放在同一条线上以移除正常提供的自动单个空白区域），但是可以为你想要的东西工作。 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. 我所引用的答案列出了许多其他方式，在我看来，它比以前提供的更好，并解决了你遇到的真正问题。
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>
https://jsfiddle.net/stopitdan/uz1zLvhx/ https://jsfiddle.net/stopitdan/uz1zLvhx/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.