我有以下要求:
- 一个
<p>填充文本的元素 - 一个
<img>元素 - 放置图像的坐标 (x/y)
现在我想定位 <img>元素根据我的服务器端计算的 x 和 y 像素值。我不想使用 position:absolute因为我还想要 <p> 里面的文字元素环绕图像。
只有 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/