6

情况：我的模板中有一个固定的图像溢出了内容。因为它是固定的，所以有时图像会溢出文本。有没有一种方法可以解决这个问题并使文本在图像周围移动，就好像它float在内容 div 中一样。

请参阅html 示例。

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

一些额外的细节：

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

该问题在实时网站上不再可见，因为它已通过将#cloud 置于较低的 z-index 层中来解决。

4

5 回答 5

4

您正在寻找的是所谓的CSS Exclusions 和 Shapes。这是相对较新的，并没有被浏览器广泛支持。您可能还对这篇关于 CSS Exclusions 的精彩文章感兴趣。

于 2012-08-22T07:53:45.137 回答
1

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

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

希望这对你有用！

于 2012-08-18T11:04:18.470 回答
1

设法用 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/

于 2012-08-21T15:24:55.177 回答
1

如果我明白

( 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;
}
​
于 2012-08-23T04:06:52.873 回答
0

就个人而言，我会做的是将云缩小一点，那个云足够大，可以做到这一点。然后我会将这些云放在具有透明背景的固定 Div 中，这样它们就可以留在屏幕上，使其看起来像是在漂浮。

第二件事。如果第一个不是一个选项。我会通过更改云的那个小尖端上没有任何东西而将云放在主要提要后面Z-index ，而背景中的其他云也在提要后面，所以我不认为如果那个小尖端会引起任何问题一朵云挂在饲料后面。

于 2012-08-23T14:20:13.930 回答