html - 我如何让 div 内容高度不重叠在下面的内容上

Question

我正在制作日程 div，当我在其中添加更多单词时它重叠在下面的内容上，如何使 div 高度随内容扩展？

我试过对主 div 使用 using overflow:auto 但它不起作用

这是我的代码笔链接，可以帮助解决它

<div class="schedule">
                <div class="schedule-wrap">
                    <div class="time">
                        <span>9:00am</span>
                    </div>
                    <div class="activity">
                        <div class="random-activity">
                            <div class="speaker-session">
                                <span class="activity-title">Breakfast & Checkin</span>
                                <span class="activity-time">9:00am - 9:30am</span>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

CSS代码

.time {
  display: inline-block;
  font-size: 12px;
  color: #979797;
  margin-top: 10px;
}

.schedule {
  margin: 0 15px 3.5rem 15px;
  display: block;
  overflow: auto;
}

.activity {
  margin: 0 15px;
  position: absolute;
  width: 65%;
  display: inline-block;
  padding: 10px 10px;
  background-color: rgba(1, 186, 186, 0.2);
}

.activity-title {
  display: block;
  font-size: 22px;
  font-weight: 600;
  text-transform: uppercase;

  width: 65%;
}

.activity-time {
  display: inline-block;
  font-size: 12px;
}

.activity-two {
  margin: 0 15px;
  width: 90%;
  display: inline-block;
  padding: 10px 10px;
  background-color: #e7eaf0;
}

https://codepen.io/Triciah101/pen/LYPymzw

它们应该有相等的边距

Answer 1

我建议您删除 overflow: auto; 和 position: absolute; 来自您的代码。

如果您想绝对定位子元素(在我们的例子中是 .activity 元素)，则将父亲的 (.schedule) 位置设置为相对位置。但是你将不得不为每个 child 分别设置不同值的绝对位置。