Css div绝对被文本包围[重复]

Question

我正在尝试用 position: absolute 包围 div。 始终在 div 下显示文本。

我正在使用的 CSS：

.all {
    display: block;
    width: 250px;
    min-height: 180px;
    height: auto;
    position: relative;
    background: #fa65fc;
}
.abs {
    position: absolute;
    top:  80px;
    left: 200px;
    float: right;
    width: 50px;
    height: 100px;
    background: #4542df;
}

两个 div：

<div class="all">
    <div class="abs">ABS</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>

这里是链接：JSFiddle

我想做这样的事情：

提前致谢。

Answer 1

您可以通过使用 css 插入一个虚拟元素来实现您正在寻找的结果。这种方法意味着您不需要将 <div class="abs"> 定位在该 div 内容的中间。如果您无法控制内容是什么（在内容输入到 cms 的情况下），这可能会很有用。

HTML：

<div class="all">
    <div class="abs">ABS</div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>

CSS：

.all {
    display: block;
    width: 250px;
    min-height: 180px;
    height: auto;
    position: relative;
    background: #fa65fc;
}

.all:before { 
    content: "";
    float: right;
    height: 80px;
    width: 0;
}

.abs {
    clear: both;
    float: right;
    width: 50px;
    height: 100px;
    background: #4542df;
}

链接到JSFiddle。

.all:before 在<div class="all"> 的开头插入一个右浮动、无宽度、高80px 的虚拟元素。

因为.abs 是向右浮动的（但不是绝对定位），它现在会尝试在 div 的顶部保持浮动。添加clear: both 会强制它下降到任何其他浮动元素下方，因此它最终会向下移动 80px 以清除它之前的虚拟浮动。

Answer 2

你不能用绝对位置来做到这一点。但是，您可以使用静态位置和带有一些边距的float: right; 来实现您在图像上显示的内容。

这是一个更新的 jsFiddle：http://jsfiddle.net/U5Pg5/2/

HTML：

<div class="all">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
<div class="abs">ABS</div>
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>

CSS：

.all {
    display: block;
    width: 250px;
    min-height: 180px;
    height: auto;
    position: relative;
    background: #fa65fc;
}
.abs {
    float: right;
    width: 50px;
    height: 100px;
    background: #4542df;
    margin-left: 15px;
    margin-top: 10px;
    margin-bottom: 10px;
}