Css div绝对被文本包围

Question

我试图用位置包围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;
}