0

我试图用 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

我想做这样的事情：

在此处输入图像描述

提前致谢。

4

2 回答 2

3

您可以通过使用 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">.

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

于 2014-05-14T08:04:04.300 回答
1

你不能用绝对位置来做到这一点。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;
}
于 2014-05-14T07:50:21.307 回答