Html CSS、显示内联和三个div_Html_Css

Html CSS、显示内联和三个div

html css

Html CSS、显示内联和三个div,html,css,Html,Css,我有以下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=

我有以下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填充页面，但它们不能填充整个宽度

发生了什么事？


<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的原因是display:inline不占用%的宽度。

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>


A.
B
C

摘自：

display:inline

表示元素显示为内联显示，位于同一行上的当前块。只有当它在两个街区之间时元素构成“匿名块”，然而，这可能是最小的宽度

不能为内联元素集提供宽度或高度标注，它们将被忽略。元素的显示类型必须为

块

。但是，设置

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>


#包裹{
宽度：100%；
}
#包装：之后{
/*防止包装物高度收缩，
看见http://www.positioniseverything.net/easyclearing.html */
内容：“.”；
显示：块；
身高：0；
明确：两者皆有；
可见性：隐藏；
}
#包装容器{
浮动：左；
宽度：33%；
}

嗯，语义

有关浮动的更多评论，请参阅中的答案。

Rory Fitzpatrick或多或少为您提供了理想的答案，尽管不需要在#包装上设置pos:rel，因为它已经是一个相对块元素，默认情况下将跨越整个宽度

当你浮动一个块元素时，它模仿了display:inline的对齐功能，在理想情况下，我们可以访问非常有用的display:inline块，它可以完成你所期望的功能

但是，当浮动元素时，您应该记住的一点是，除非设置固定的宽度，否则它们只会占用所需的空间（包括边距和填充）

这就是Rory使用宽度的原因：33%；因为这是你能得到的最好的：）

理想情况下，这应该是对Rorys post的评论，但我的帖子数量还不够多。

可以使用flexbox来调整大小，而不是使用float。这也会强制元素保持在一行中

例如：

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


#包裹{
宽度：100%；
显示：内联flex；
}
#包装：之后{
内容：“.”；
显示：块；
身高：0；
明确：两者皆有；
可见性：隐藏；
显示：内联flex；
弯曲方向：行；
}
.集装箱1{
宽度：20%；
}
.集装箱2{
宽度：80%；
}

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

最快、最简单的方法并不是最漂亮的（把你的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>

您可能还希望float:左键位于div0Removed pos:rel上，并为您链接到此答案：）是我还是此答案的显示结果与原始问题中的代码完全相同？我将上面的文本复制到一个文本编辑器中，并在添加颜色后将文件保存为HTML文件，以便我们可以看到不同的div。它仍然不能填满整个窗口。什么浏览器？在FF3和IE7中对我来说很好。我是css新手，你的答案包含了很多有用的参考资料！谢谢像将

display:inline

更改为

display:inline block

这样简单的修复方法怎么样。。。。。