Html css中不显示同一行中的div

我在另一个div容器中有两个div（.diva和.divb）（#divs test）

但不显示div

我做错了什么

这是小提琴

---

要使百分比高度如

高度：40%

起作用，您必须执行以下操作之一：

• 将

  height

  属性设置为父属性，不同于

  auto

• 从文档的正常流中删除元素（例如，

  位置：绝对值

  ），以便其高度不会影响父元素的高度

---

如果不是，则子项的高度（相对于父项的高度）将取决于其自身，因为父项的高度将取决于其内容的高度。

显示div，如果您要添加，它们的高度仅为零

div { border:1px solid }

您将看到它们，请检查以下内容：

---

一般情况下：仅当元素的父元素定义了非自动高度时，以百分比表示的高度（父元素高度）才起作用。

他们需要高度。。如果你想让它们可见，至少要让它们里面的内容可见。看这里：首先，你的示例代码应该是你问题的一个最小示例，而你的小提琴显然不是。其次，使用内联块显示。div是块元素。可以将display:inline或display:inline块添加到它们中，也可以使用spans详细说明“从正常流中删除元素…”？为什么您认为百分比必须起作用？@c-smile，因为具有

height:auto

的元素的高度取决于其内容。但如果将内容的高度设置为相对于父级的高度，则它是一个循环定义。要打破它，要么父级不应该有

高度：auto

，要么子级不应该影响父级的高度（您可以将其从正常流中删除），以便在CSS处理器需要获取其计算值时使用已知高度的父级。对于

position:absolute

计算值的确定可以延迟，直到所有静态内容被替换，因此定位元素可以使用具有

height:auto

的父元素来解析相对于其静态自动高度的百分比。但严格来说，这与“…不会影响…”无关。@c-微笑好吧，这是我理解和记忆它的方式，有点有效。如果您能够准确地记住中描述的算法，则对您有好处：）

#divs-test{
    width: 100%;
}

#divs-test > div{
    height:40%;
}

.diva{
    width: 70%; 
}
.divb{
    width: 30%;
}

div { border:1px solid }