Question

第1部分：

我试图让我的父div增加高度作为内容。它是包含在父div中的幻灯片放映，幻灯片放映是响应式的。一切都很好，但10px填充没有反映在主容器周围。有什么帮助吗？

示例：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

第2部分：

（我的奖金。）

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

Answer 1

正在应用父级上的

padding: 10px，但top: 10px上的img正在将其向下推10px并弄乱父级的底部填充。要增加图像顶部和父级之间的空间而不会弄乱父级的底部填充，请在padding-top <上使用margin-top或top代替img < / p>

要将.rightbox放在.carousel_slider旁边，请创建父display: flex，然后将这2个子项放在相邻的列中。

.mainer {
  width: 100%;
  background-color: red;
  padding: 10px;
}

.slide_wrapper {
  height: inherit;
  border: 0px solid black;
  clear: left;
  margin: 0 auto;
  position: relative;
  text-align: center;
  padding-top: 10px;
}
.slide_wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.rightbox {
  width: 100px;
  height: 100px;
}

<div class="mainer">
    <div class="slide_wrapper">
     <div class="carousel_slider">      
        <div class="item" style="width:100%;">
          <img src="http://kenwheeler.github.io/slick/img/fonz1.png" style="width:100%;height:auto"/>
        </div>       
      </div>
      <div class="rightbox">rightbox</div>
    </div>
</div>

Answer 2

您的问题可能与使用clear而不使用clearfix有关。我并不完全确定为什么你真的开始clear:left，你的html中没有任何其他浮动元素可以清除。无论如何，当你清除一个元素时，它不再占用通常的空间。清除元素中的项目仍会占用空间，但是您无法正常应用边距和填充到已清除的元素而不使用clearfix。这是您可以轻松使用的一个。

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

话虽这么说，clear + clearfix相当折旧，你可能会在其他地方找到更好的结果。尝试使.mainer相对定位，并将.slide_wrapper放在其中。这应该允许您将宽度设置为60％并将其相对于.mainer的顶部和左侧对齐。如果您没有使用旧版本的Internet Explorer，也许请查看flexbox。我不打算在这里解释所有的flexbox，因为其他人已经做得更好，但是它允许你智能地将项目与父容器对齐，如果你的元素有兄弟姐妹，它会特别有用。

尝试使用内容使父容器保持高度

第1部分：

示例：

第2部分：

2 个答案: