html - 自动包含设置了顶部/左侧/右侧/底部值的相对定位元素

Question

我希望父容器 .wrapper1 （绿色边框）自动包含 .wrapper2 （蓝色边框），没有javascript可以吗？

.wrapper2 可以包含在 .wrapper1 中（给定顶部未设置）。但是，如果 top:100px，.wrapper2 现在在 .wrapper1 之外

.wrapper1 { 
border:3px solid green;
width:300px;
}

.wrapper2 { 
position: relative; 
width:100px;
top:100px;
margin:0 auto;
border:3px dashed blue;
}    

<div class="wrapper1">
<p class="wrapper2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, quia, quod, quae nisi beatae vel id fugiat cupiditate voluptas aperiam aspernatur est hic debitis a corrupti laudantium ipsa iure deleniti.</p>
</div>  

谢谢。

Answer 1

您可以使用溢出CSS 属性来剪辑内容或显示块级元素的溢出内容。

例如，尝试添加overflow: auto;到.wrapper1.

JSFiddle

Answer 2

尝试这个;

HTML：

<div class="wrapper1">
<p class="wrapper2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, quia, quod, quae nisi beatae vel id fugiat cupiditate voluptas aperiam aspernatur est hic debitis a corrupti laudantium ipsa iure deleniti.</p>
</div>

CSS：

.wrapper1 { 
border:3px solid green;
width:300px;
}

.wrapper2 { 

width:100px;
top:100px;
margin:0 auto;
border:3px dashed blue;
}

jsfiddle：http: //jsfiddle.net/cVsQ7/