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