包装元素时，内联容器不显示背景颜色

Question

我正在尝试显示两个内联 div，每个 div 包装 2 个块 divs，我的问题是

为什么内联 div 不显示背景，即使它们有 children，直到我在里面输入内容，背景才显示但只显示在文本中，没有换行 children.

这是我的代码：

.container{
    background-color: rgb(37, 220, 20);

    height: 100px;
    width: 100px;
    /* display:block; */
}
.item{
    background-color: coral;
    margin: 10px;
    height: 25px;
    width: 25px;
}
.block{
    display: inline;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container block" style="background-color: crimson">
      <div class="item"></div>
      <div class="item"></div>
      
    </div>
    <div
      class="container block"
      style="background-color: rgb(20, 180, 220)"
    >
      <div class="item"></div>
      <div class="item"></div>
      showing BG
    </div>
  </body>
</html>

Answer 1

内联元素没有高度或宽度以及一些其他样式限制 - 您应该将它们设为内联块以达到您想要的效果。

在下面的代码片段中 - 我笑着将样式更改为内联块，我相信它会像你想要的那样工作 - 我还能够从第二个块中删除文本。

此外 - 在任何元素上似乎都没有“弹性容器”class。

.flex-container{
    background-color: rgb(37, 220, 20);

    height: 100px;
    width: 100px;
    /* display:block; */
}
.item{
    background-color: coral;
    margin: 10px;
    height: 25px;
    width: 25px;
}
.block{
    display: inline-block; /* I changed this to inline block */
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container block" style="background-color: crimson">
      <div class="item"></div>
      <div class="item"></div>
      
    </div>
    <div
      class="container block"
      style="background-color: rgb(20, 180, 220)"
    >
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </body>
</html>

包装元素时，内联容器不显示背景颜色

Inline container isn't showing background color when wrapping elements

html

css

inline

block