gpt4 book ai didi

html - 不使用绝对定位定位元素

转载 作者:可可西里 更新时间:2023-11-01 13:30:29 26 4
gpt4 key购买 nike

我有以下要求:

  • 一个<p>填充文本的元素
  • 一个<img>元素
  • 放置图像的坐标 (x/y)

现在我想定位 <img>元素根据我的服务器端计算的 x 和 y 像素值。我不想使用 position:absolute因为我还想要 <p> 里面的文字元素环绕图像。

JsFiddle here.

只有 Css 会很好,但也可以使用 javascript。

最佳答案

对于旧版本的 IE/FF/Chrome,使用 shape-outside 和 polyfill 可能是解决您问题的一种方法。

我已经在您的示例中添加了一些代码: http://jsfiddle.net/dnmbpa7f/4/

img{
shape-outside: polygon(10px 200px, 10px 500px, 550px 500px, 550px 200px);
shape-margin: 1em;
margin:25px;
float:left;
margin-top:200px;
}

div#container{
clear:both;
}
<div id="container">

<img src="https://www.estella-kochlust.de/media/image/thumbnail/burger_520x520.png"/>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, <span>popop</span>sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

</p>
</div>

有关 polyfill 的更多信息,请参阅:http://blogs.adobe.com/webplatform/2014/05/12/css-shapes-polyfill/

最好的问候, ionic

关于html - 不使用绝对定位定位元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30750743/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com