css 嵌套元素的背景色不起作用[重复]

qf9go6mv 于 2023-03-05 发布在其他

关注(0)|答案(7)|浏览(179)

- 此问题在此处已有答案**：

Why is the parent div height zero when it has floated children（4个答案）
5天前关闭。
我将外部div（question-template）的背景色设置为蓝色，但是它没有显示出来，为什么？
它的一个演示：

.question-template {
    width: auto;
    height: auto;
    background-color: blue;
}

.question {
    float: left;
    margin: 10px;
}

.participants {
    background-color: green;
    float: left;
    margin: 10px;
}

<body>
    <div class="question-template">
        <div class="participants">234</div>
        <div class="question">Some lorem ipsum text</div>
    </div>
</body>

css

来源：https://stackoverflow.com/questions/13118418/background-color-of-nested-elements-not-working

7条答案

按热度按时间

wmtdaxz31#

尝试将overflow添加到外部div的样式中：

.question-template {
    width: auto;
    height: auto;
    background-color: blue;
    overflow: auto;
}

x一个一个一个一个x一个一个二个x

赞(0）回复(0）举报 2023-03-05

6vl6ewon2#

这是因为你的两个子元素都是向左浮动的，这意味着容器不会伸展到包含子元素所需的最大高度。
要解决这个问题，您需要在CSS中添加一个clearfix类，如下所示：

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

然后将类添加到HTML中，如下所示：

<div class="question-template clearfix">

一个二个一个一个

赞(0）回复(0）举报 2023-03-05

chhqkbe13#

使用overflow: hidden;定义父div.question-template：

.question-template {
    width: auto;
    height: auto;
    background-color: blue;
    overflow: hidden;
}

.question {
    float: left;
    margin: 10px;
}

.participants {
    background-color: green;
    float: left;
    margin: 10px;
}

<body>
  <div class="question-template">
    <div class="participants">234</div>
    <div class="question">Some lorem ipsum text</div>
  </div>
</body>

或者将clear div添加到父项：
一个二个一个一个

赞(0）回复(0）举报 2023-03-05

ac1kyiln4#

你需要在父div上应用一个clear the float来确保它占据了内部元素，你可以在父div关闭之前插入一个<div style="clear:left;"></div>或者在父div上应用一个clearfix类。

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

然后只需将clearfix类添加到父div

...    
<div class="question-template clearfix">
...

Working Example

赞(0）回复(0）举报 2023-03-05

twh00eeo5#

将overflow: auto添加到.question-template：

.question-template {
    width: auto;
    height: auto;
    background-color: blue;
    overflow: auto;
}

.question {
    float: left;
    margin: 10px;
}

.participants {
    background-color: green;
    float: left;
    margin: 10px;
}

<body>
  <div class="question-template">
    <div class="participants">234</div>
    <div class="question">Some lorem ipsum text</div>
  </div>
</body>

赞(0）回复(0）举报 2023-03-05

kmb7vmvb6#

检查你的display属性，也许是它的inline？将它更改为block或其他。

赞(0）回复(0）举报 2023-03-05

eeq64g8w7#

<div>元素使用固定高度，将如下所示

.question-template {
    width: auto;
    height: 150px;
    background-color: blue;
 }
 .question {
    float: left;
    margin: 10px;
    color: white;
 }
 .participants {
    background-color: green;
    float: left;
    margin: 10px;
 }

赞(0）回复(0）举报 2023-03-05

我来回答

css 嵌套元素的背景色不起作用[重复]

7条答案

相关问题

热门标签

最新问答