Question

我有这个HTML代码：

<body>
    <div id="div0" style="display:inline; background-color:green; width:100%">
        <div id="div1" style="display:inline; background-color:aqua;width:33%">&nbsp;</div>
        <div id="div2" style="display:inline; background-color:red;width:33%">&nbsp;</div>
        <div id="div3" style="display:inline; background-color:yellow;width:33%">&nbsp;</div>
    </div>
</body>

我想用 div1 ， div2 和 div3 填充页面，但它们不会填满整个宽度。

发生了什么事？

Answer 1

取自display declaration：

display: inline表示该元素在内部显示内联当前块在同一行。只要当它在两个区块之间时元素形成一个'匿名块'，然而，尽可能小宽度。

您不能给出内联元素集的宽度或高度尺寸，它们将被忽略。元素必须具有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>

嗯，语义

有关浮动的进一步评论，请参阅Phunky的回答。

Answer 2

在外部<div>上使用相对定位并浮动内部<div>。请勿使用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>

Answer 3

display:inline收缩包装内容。您可能想尝试float:left。

Answer 4

Rory Fitzpatrick或多或少都有一个理想的答案，虽然没有必要设置pos：rel在#wrapper上，因为它已经是一个相对的块元素，并且默认会跨越整个宽度。

当你浮动一个块元素时，它模仿了display的对齐功能：inline，在理想的世界中，我们可以访问非常有用的显示：inline-block，它可以完全按照你期望的那样完成。 / p>

但有一件事你应该记住浮动元素是他们只占用他们需要的空间（包括边距和填充），除非你设置一个固定的宽度。

这就是为什么罗里使用宽度：33％;因为那是你将要得到的最好的东西:)

理想情况下，这可能是对Rorys帖子的评论，但我还没有足够高的帖子数。

Answer 5

<body>
    <div id="div0" style="float: left; background-color:green; width:100%">
        <div id="div1" style="float: left; background-color:aqua;width:33%">&nbsp;</div>
        <div id="div2" style="float: left; background-color:red;width:33%">&nbsp;</div>
        <div id="div3" style="float: left; background-color:yellow;width:33%">&nbsp;</div>
    </div>
</body>

这对你有用。 IIRC的原因是显示：内联不占用％宽度。

Answer 6

您可以使用flexbox进行更灵敏的调整，而不是使用浮动。这也迫使元素保持连续。

示例：

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

Answer 7

与之前给出的所有答案相反，实现此目的的最佳方法可以参考这个问题的答案：

3 inline-block divs with exactly 33% width not fitting in parent

最快捷，最简单的方法不是最漂亮的（将你的div放在同一条线上以移除正常提供的自动单个空白区域），但会为你想要的东西工作。我所引用的答案列出了许多其他方式，在我看来，它比以前提供的更好，并解决了你遇到的真正问题。

以下是完全符合您需求的代码，以及指向小提琴的链接！

<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%">&nbsp;</div><div id="div2" style="margin: 0px; display: inline-block; background-color:red;width:33.33%">&nbsp;</div><div id="div3" style="margin: 0px; display: inline-block; background-color:yellow;width:33.33%">&nbsp;</div> 
</div>

https://jsfiddle.net/stopitdan/uz1zLvhx/

CSS，显示内联和三个div

7 个答案: