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

您可以使用overflow 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/

自动包含相对定位元素，其中设置了上/左/右/下值

2 个答案:

HTML：

CSS：