html - 试图让父容器随着内容的增加而增加高度

Question

第 1 部分:

我试图让我的父 div 随着内容的高度而增加。它是包含在父 div 中的幻灯片放映，并且幻灯片放映是响应式的。一切都很好，但 10px 的填充没有反射(reflect)在主容器周围。有帮助吗？

示例:

.mainer {
  width: 100%;
  background-color: red;
  padding: 10px
}

.slide_wrapper {
  width: 60%;
  height: inherit;
  top: 10px;
  border: 0px solid black;
  clear: left;
  margin: 0 auto;
  position: relative;
  text-align: center;
}

<div class="mainer">
  <div class="slide_wrapper">
    <div class="carousel_slider">
      <div class="item" style="width:100%;">
        <img src="image.jpg" style="width:100%;height:auto" />
      </div>
    </div>
  </div>
</div>

---

第 2 部分:

(给我的奖金。)

假设我还尝试在容器 class="carousel_slider" 的右侧包含一个不同的 div class="rightbox"。他们都必须留在主容器内。我怎样才能做到这一点？第 2 部分只是我的好奇心。有什么帮助吗？提前感谢和赞赏。米歇尔

Answer 1

您的问题可能与使用没有 clearfix 的 clear 有关。我不完全确定为什么要从 clear:left 开始，真的，您没有任何其他 float 元素可以在您的 html 中清除。无论如何，当您清除一个元素时，它不再正常占用空间。 在 已清除元素中的元素仍会占用空间，但您不能在没有 clearfix 的情况下将边距和填充正常应用于已清除元素。这是您可以轻松使用的一个。

http://nicolasgallagher.com/micro-clearfix-hack/

话虽如此，clear + clearfix 已相当贬值，您可能会在其他地方找到更好的结果。尝试使 .mainer 相对定位，并将 .slide_wrapper 绝对定位在其中。这应该允许您将宽度设置为 60%，并将其相对于 .mainer 的顶部和左侧对齐。如果您不使用旧版本的 Internet Explorer，也许可以查看 flexbox。我不打算在这里解释所有的 flexbox，因为其他人已经做过并且做得更好，但它允许您智能地将元素与其父容器对齐，并且如果您的元素有 sibling ，则特别有用。