我想要一个红色的正方形,在右上角有position:fixed,当滚动的时候,它会被包裹起来并重新排列。
到目前为止,我已经排除了使用shape-outside (请参阅Fiddle 这里),但是它不能很好地使用position:fixed。
我怎样才能把红色的盒子固定在右上角,当滚动的时候,文字就会在它周围流动?
发布于 2014-08-12 12:23:42
如果没有javascript的帮助,您就不能滚动容器并保持这个浮动元素的固定(向下)。
这是一个带有过渡和负边距的演示-顶部,由输入触发,并拉出文本。http://codepen.io/anon/pen/umjDe
这不是您的解决方案,但是它应该帮助您理解这是如何工作的。
#exclusion {
shape-outside: rectangle(-20px, 0, 150px, 150px, 50%, 50%);
float: right;
width: 150px;
height: 150px;
background-color: red;
}
:checked ~ article p {
margin: -50% 0 0;
}
p {
transition:4s;
}
article {
margin:0;
border:solid;
overflow:hidden;
}另一个推下浮动元素的示例:http://codepen.io/anon/pen/KafAn
您可以通过javascript调优其中一个或另一个演示,检查滚动的数量:)
发布于 2014-08-12 12:20:59
只有有块显示的元素才能重新排列文本,但是翻译是不可能的。在这种情况下,使用固定的、绝对的或相对的位置是行不通的。
在我看来,唯一的解决方案是为该任务编写一个javascript,但这并不简单。
例如,您可以将每个单词保存在分隔标记中,然后将排除放在段落中所需的位置。
https://stackoverflow.com/questions/25263815
复制相似问题