html - 样式化“溢出”的内容

Question

只是想检查这种设计在 CSS 中是否可行，基本上子元素的内容会溢出其父元素的范围：

我曾尝试使用负边距和位置属性，但这不是一种万能的解决方案。当子类的内容增加时，父类的大小也会增加。

这里的风格：

.spilling-content {
 position: relative;
 margin-top: -10rem;
 top: 10rem;
}

我还尝试将height孩子的 设置为固定值，这解决了父母的尺寸问题，但预计问题是本节下面的内容没有被下推。

我可以尝试任何其他技巧吗？

标签： htmlcss

Answer 1

浮动可以在这里提供帮助：

.parent {
  border: 2px solid;
  padding: 20px 20px 40px;
}

.child {
  float: left;
  margin-top:10px;
  border: 2px solid red;
}

.parent + * {
  clear:both;
}

<div class="parent">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus rhoncus leo, et vehicula nulla tempor ullamcorper. Sed id magna
  <div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus rhoncus leo, et vehicula nulla tempor ullamcorper. Sed id magna rhoncus, gravida tellus eget, scelerisque quam. Quisque quis magna velit. Fusce aliquet condimentum neque ac
    mollis. Sed suscipit elementum bibendum. Vestibulum condimentum neque ac
    mollis. Sed suscipit elementum bibendum. Vestibulum </div>
</div>

<div class="parent">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus rhoncus leo, et vehicula nulla tempor ullamcorper. Sed id magna
  <div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus rhoncus leo, et vehicula nulla tempor ullamcorper. Sed id magna rhoncus, gravida tellus eget, scelerisque quam. Quisque quis magna velit. Fusce aliquet condimentum neque ac
    mollis. Sed suscipit elementum bibendum. Vestibulum condimentum neque ac
    mollis. Sed suscipit elementum bibendum. Vestibulum  consectetur adipiscing elit. Suspendisse faucibus rhoncus leo, et vehicula nulla tempor ullamcorper. Sed id magna rhoncus, gravida tellus eget, scelerisque quam. Quisque quis magna velit. Fusce aliquet condimentum neque ac
    mollis. Sed suscipit elementum bibendum. Vestibulum condimentum neque ac
    mollis. Sed suscipit elementum bibendum. Vestibulum</div>
</div>
<div class="parent">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus rhoncus leo, et vehicula nulla tempor ullamcorper. Sed id magna
  <div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus rhoncus leo, et vehicula nulla tempor ullamcorper. Sed id magna rhoncus, gravida tellus eget, scelerisque quam. Quisque quis magna velit. Fusce aliquet condimentum neque ac
    mollis. Sed suscipit elementum bibendum. Vestibulum condimentum neque ac
    mollis. Sed suscipit elementum bibendum. Vestibulum  consectetur adipiscing elit. Suspendisse faucibus rhoncus leo, et vehicula nulla tempor ullamcorper. Sed id magna rhoncus, gravida tellus eget, scelerisque quam. Quisque quis magna velit. Fusce aliquet condimentum neque ac
    mollis. Sed suscipit elementum bibendum. Vestibulum condimentum neque ac
    mollis. Sed suscipit elementum bibendum. Vestibulum ullamcorper. Sed id magna rhoncus, gravida tellus eget, scelerisque quam. Quisque quis magna velit. Fusce aliquet condimentum neque ac
    mollis. Sed suscipit elementum bibendum. Vestibulum condimentum neque ac
    mollis. Sed suscipit elementum bibendum. Vestibulum</div>
</div>