html文字从右下角飞入,css – 你可以在其父div的右下角浮动一个div并在其周围环绕文字吗？...

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

Demo

text

#parent:before {

content: '';

height: 35%;

float: right;

}

#parent div {

width: 130px;

height: 65%;

float: right;

clear: right;

}

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

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

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

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

Caniuse

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

Example

#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限制.