你可以在其父div的右下角浮动一个div并在其周围环绕文字吗？

Question

我认为这将是一个常见问题,但我寻求解决方案让我相信它可能是不可能的.我只是想在其父div的右下角放置一个div,但是父div中的文本会绕过它.

虽然我发现很多帖子都在解决这个问题,但我找不到一个似乎有用的帖子.这些帖子中的大多数都已有几年的历史了,这让我有一丝希望,毕竟用HTML 5可能有办法吗？

我应该提到这是为了追求响应式设计,所以静态解决方案不起作用.

这是我正在尝试做的事情:http://test.scoe.net/rfox/usalResponsive6/indexTeacher.html

我在div的右下角有一个背景图片.我希望这个div中的文本不会流过图像,而是绕过它.我以为我能够在下角放置一个空div(在引用页面中用紫色矩形表示),以防止文本流过背景图像,但我似乎无法找到实现此目的的方法.

Answer 1

没有看到那里的演示 - 或者任何人使用伪元素(由于它的样式而不是内容在语义上更正确)所以让我发帖然后:

演示

<div id="parent">
  <div></div>
  <span>text</span>
</div>

#parent:before {
  content: '';
  height: 35%;
  float: right;
}

#parent div {
  width: 130px;
  height: 65%;
  float: right;
  clear: right;
}

在这种特殊情况下,当涉及响应性时,有两个方面.首先是背景,但由于大多数情况下它本身没有响应并位于右下角,因此可能必须在媒体查询中设置一些宽度和高度以及断点.

另一种形式的响应,自动调整文本的数量,是一个棘手的,如果没有JavaScript似乎是不可解决的.当剩下高度时auto,浮动元素将不会继承任何高度.这导致效果不呈现.并且因为孩子不能将树提到与父母未知身高相关,所以没有纯粹的CSS方法可用.

所以这个例子仍然有一个固定的高度和一小部分被注释掉的JS,但它应该接近使它适应.这是一种解决方法,但它是当前所有浏览器支持都允许的.

现在可以在将来使用什么!

我可以用吗

图像本身可以被裁剪并保存为png,在其周围留下透明空间.然后我们可以申请shape-outside和shape-image-threshold规则.使用当前规范,任何文本将在浮动时进行换行.浏览器支持它在这一点上仍然有限,但它非常有前途.我注意到的一件好事是,当浮动元素被赋予顶部边距时,文本将开始在它上面流动!这个帖子顶部的示例中不会出现这种情况,它只会使块看起来更长(并且也是空的).因此,只需设置边距并且不使用额外的推动元件,只需少量香草JS即可使其完全响应:

例

<img id="image" src="image.png" alt="">

#image {
  shape-outside: url(image.png);
  shape-image-threshold: 0.5;
  float: right;
}

window.onload = placeBottom;
window.onresize = placeBottom;

function placeBottom() {
var parent = document.getElementById('parent'),
image = document.getElementById('image');
image.style.marginTop = 0;
var space = parent.clientHeight-image.clientHeight;
image.style.marginTop = space + 'px';
}

它实际上非常简单:

http://www.html5rocks.com/en/tutorials/shapes/getting-started/

后一部分归功于Paulie_D让我进入CSS形状的轨道,后来认识到以这种方式使用的图像受到相同的域策略的约束.这意味着他们必须由网站本身托管或在外部链接时,需要放宽CORS限制.