首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >使用外形-外型与位置:固定。

使用外形-外型与位置:固定。
EN

Stack Overflow用户
提问于 2014-08-12 12:03:45
回答 2查看 604关注 0票数 3

我想要一个红色的正方形,在右上角有position:fixed,当滚动的时候,它会被包裹起来并重新排列。

到目前为止,我已经排除了使用shape-outside (请参阅Fiddle 这里),但是它不能很好地使用position:fixed

我怎样才能把红色的盒子固定在右上角,当滚动的时候,文字就会在它周围流动?

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-08-12 12:23:42

如果没有javascript的帮助,您就不能滚动容器并保持这个浮动元素的固定(向下)。

这是一个带有过渡和负边距的演示-顶部,由输入触发,并拉出文本。http://codepen.io/anon/pen/umjDe

这不是您的解决方案,但是它应该帮助您理解这是如何工作的。

代码语言:javascript
运行
复制
#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调优其中一个或另一个演示,检查滚动的数量:)

票数 3
EN

Stack Overflow用户

发布于 2014-08-12 12:20:59

只有有块显示的元素才能重新排列文本,但是翻译是不可能的。在这种情况下,使用固定的、绝对的或相对的位置是行不通的。

在我看来,唯一的解决方案是为该任务编写一个javascript,但这并不简单。

例如,您可以将每个单词保存在分隔标记中,然后将排除放在段落中所需的位置。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/25263815

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档