Question

这可能是一个非常基本的问题，但是当包含父div没有时，是否可以让孩子独自回应？

所以基本上，这是我的html：

<div id="parent">
   <div id="child"></div>
</div>

和css：

#child {
    background-color: red;
    height: 20%;
    width: 50% !important;
}

#parent {
    background-color: blue;
    width: 500px;
    height: 50px;
}

现在，我想通过使用css使孩子响应而不影响父div。 http://jsfiddle.net/o5xajj9s/

提前致谢。

Answer 1

不是相对于父级调整子div的大小，而是必须相对于其他内容调整大小。

这方面的一个例子是使用视口宽度/视口高度。

http://jsfiddle.net/o5xajj9s/1/

此div始终为视口宽度的50％（计算机上的窗口大小）。将此与您需要的媒体查询相结合，我认为可以解决您的问题。

div {
  width: 50.0vw !important; 
}

如何让一个孩子div单独响应使用CSS？

1 个答案: