Question

我希望我的父高在有1或2个子div时自动，如果有超过3 div则具有特定高度。怎么做？有可能吗？

toString()

SCSS

<div class="parent-div"> 
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

Answer 1

在Page Loaded上下文中，使用JavaScript查找div并计算其内容。然后根据需要应用CSS。

设置最大高度总是会限制高度，即使只有一个或两个div存在。

Answer 2

目前无法使用纯CSS设置元素的父级样式。

如果您在渲染HTML时知道项目数量，或者在DOM更改时有办法修改类，您可以创建一些修饰符类并将它们与基类一起使用。

.parent-div {
  padding-right: 25px;
  margin-bottom: 7px;
}

.parent-div-few {
  /*
   * Not even needed, auto is the initial value.
   */
  height: auto;
}

.parent-div-lot {
  /*
   * Not even needed, auto is the initial value.
   */
  height: 370px;
  overflow: auto;
  overflow-x: hidden;
}

对两种不同的情况使用不同的HTML结构：

<div class="parent-div parent-div-few">
  <div class="child">
  <div class="child">
<div>

<div class="parent-div parent-div-lot">
  <div class="child">
  <div class="child">
  <div class="child">
<div>

调整父div的高度取决于子div

2 个答案: