Question

情况：我的模板中有一个固定的图像，它溢出了内容。因为它是固定的，有时图像溢出文本。是否有一种方法可以修复此问题，并使文本围绕图像进行处理，就像在内容div中float一样。

请参阅html-example。

CSS答案是首选，Javscript / jQuery答案是可以接受的。

一些额外的细节：

内容是随机的。它可以是长，短，包含图像并具有html。
#cloud必须与任何内容保持相同的位置。

这个问题在实时网站上不再可见，因为它是通过将#cloud放在较低的z-index层来解决的。

Answer 1

您要找的是CSS Exclusions and Shapes。这是相对较新的，并没有得到浏览器的广泛支持。您可能也对这个伟大的article on CSS Exclusions感兴趣。

Answer 2

我相信这就是你要找的东西：http://jsfiddle.net/pG3AG/

云div必须相对定位，而不是绝对定位，因为绝对定位会导致元素根据视口而不是相对于其他元素（如本例中的内容元素）定位。另外，右边：需要减少或移除盒子的20px定位，以便行中“未完成”单词的最后一个字母不会落在云盒后面。

希望这对你有用！

Answer 3

有点为JQuery的JS Fiddle示例设法解决它（抱歉，无法提出CSS解决方案）

var _top = $('#cloud').offset().top;
var _left = $('#cloud').offset().left;
var _height = $('#cloud').height();

var _contentTop = $('#content').offset().top;
var _contentLeft = $('#content').offset().left;
var _contentWidth = $('#content').width();

var _floatWidth = (_contentLeft+_contentWidth)-_left
    var _floatTop = _top-_contentTop;

$('#content').prepend('<div id="virtual" style="float:right">&nbsp;</div>');
$('#virtual').css('margin-top',_floatTop).css('width',_floatWidth).css('height',_height);

基本上，我正在添加一个隐藏的div，浮动到云的位置，因此它位于内容中，推动文本周围，云出现在前景中。

查看您链接到的网站上的内容，您可能需要将div移动到周围的容器中并稍微使用数字，但它或多或少在这里工作http://jsfiddle.net/cLnz6/58/

Answer 4

如果我理解

（http://jsfiddle.net/VG4Ef/1/）

body{
    background-color: #8888FF;
}

#container{
    float:left;
    width: 400px;
    background-color:#CFCFFF;
    height: auto;
    margin: 10px auto;
    padding: 10px;
    margin-right:10px;
}

#content{
    background-color: #FFDFDF;
    width: 340px;
    padding: 5px;
    position:relative;
    float:left:
}

#cloud{
    width: 130px;
    height: 100px;
    background-color:#FFF;
    float:right;
    top: 120px;
    text-align: center;
    line-height: 100px;
    color: #999;
    font-size: 12px;
    float:right;
    display:inline-block;
    margin-top:-100px;
    margin-right: -100px;
    background: yellow;
}

Answer 5

个人而言，我要做的就是收缩一点云，云就足够大了。然后我会将这些云放在带有透明背景的固定Div中，这样它们就会留在屏幕上，使它看起来像是浮动的。

第二件事。如果第一个不是一个选项。我会通过改变Z-index将云放在主要的饲料后面。云的那个小尖端没有任何东西，背景中的其他云也在饲料后面，所以我不会想象它会提高任何如果云的小尖端悬挂在饲料后面，则会出现问题。

在另一个z-index图层中的固定溢出元素周围移动文本

5 个答案: