时间戳

首页 > 解决方案 > 子 div 溢出父 div 负边距顶部

css - 子 div 溢出父 div 负边距顶部

问题描述

我在divparent中为 child 添加了负边距div。一切正常，直到我添加了负边距，现在titlediv 不会居中而是溢出。这可能是我没有看到的基本 CSS 错误，但无论我到目前为止尝试了什么，它都没有成功。

我认为问题在于它看到的元素比它大，而不是由于溢出。我尝试将 a 添加min-height到父 div，然后尝试使用 flexbox 将其居中，但这并没有将其居中，因为它看到的父元素比它大。

修复此溢出的最佳方法是什么，以使它们title div完美地对齐在 的中心container div，但同时当contentdiv 出现时，它们都在 的中心对齐container div？预先感谢您的任何帮助。

var container = document.querySelector(".container");
container.addEventListener("click", function(e) {
  [...container.querySelectorAll(".content")].forEach(ele => ele.classList.toggle("show"));
});
* {
  box-sizing: border-box;
}

.container {
  background: gray;
  padding: 1rem;
  height: auto;
  display: flex;
  flex-direction: column;
}

.container .title {
  background: blue;
  z-index: 20;
  height: 50px;
}

 .content {
    display: block;
    max-height: 0;
    overflow: hidden;
    background: lightgray;
    opacity: 0;
    transition: margin 2s;
    margin-top: -20px;
}

.show {
  transition: 0.5s;
  max-height: 100%;
  overflow: visible;
  opacity: 1;
  margin-top: 0px;
  animation: slidein 2s;
}
<div class="container">
  <div class="title">
    Some random title text.
  </div>
  <div class="content">
    lorem ipsum  lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
  </div>
</div>

标签： css

解决方案

它是您正在寻找的解决方案吗？我取消并添加max-height: 0到contentflexboxtitle

var container = document.querySelector(".container");
container.addEventListener("click", function(e) {
  [...container.querySelectorAll(".content")].forEach(ele => ele.classList.toggle("show"));
});
* {
  box-sizing: border-box;
}

.container {
  background: gray;
  padding: 1rem;
  height: auto;
  display: flex;
  flex-direction: column;
}

.container .title {
  background: blue;
  z-index: 20;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

 .content {
    display: block;
    overflow: hidden;
    background: lightgray;
    opacity: 0;
    transition: margin 2s;
    margin-top: -20px;
}

.show {
  transition: 0.5s;
  max-height: 100%;
  overflow: visible;
  opacity: 1;
  margin-top: 0px;
  animation: slidein 2s;
}
<div class="container">
  <div class="title">
    Some random title text.
  </div>
  <div class="content">
    lorem ipsum  lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
  </div>
</div>

推荐阅读