Css 我怎样才能让我的文字环绕在我的图片上方？

我一直在使用新的adobe

CSS形状

，可惜没有用

因为我的浏览器只支持20%（应该仍然支持我正在使用的东西），我想我应该开始解决这个问题并尝试一些新的东西

我试着把图像放在文本的中心，让文本从顶部拥抱图像。如果将

页边距顶部

添加到

#左圆圈

/

#右圆圈

，您将看到图像上方的空白区域，这是一个

如果您想试用

CSS形状

，请单击此按钮并按照步骤在浏览器上启用它们。

本节不规范

形状定义可以用作CSS值的任意几何图形。 本规范定义了用于控制几何图形的特性 元素的浮动区域。“外部形状”属性使用形状值来 定义浮动的浮动区域

注意：CSS形状的未来级别将允许在元素上使用形状 除了浮动。其他CSS模块也可以使用形状， 例如CSS掩蔽[CSS-Masking]和CSS排除 [CSS3-除外责任]

注意：如果用户代理同时实现CSS形状和CSS排除， “外部形状”特性定义了图形的排除区域 排除

注意：未来级别的CSS形状将在内部定义一个形状 属性，该属性将定义一个形状以在 元素

我已经在各个方面达到了我想要的效果，除了我无法让我的文本包装在图像/容器上方。我使用了

边距

，

填充

，

顶部

，并将其定位在

相对

这是我的

CSS

，（）

有没有人知道

CSS形状

，或者我该怎么做？我想只保留css，但如果需要javascript，我会尝试一下

我并不是想支持所有的浏览器或任何类似的东西，只是想学习adobe正在开发的新工具

资源

---

花了我很长时间，但是是的。它实际上与您的想法相同，但使用零宽度容器向下推形状

.pusher{
显示：块；
宽度：0px；
高度：100px；/*img顶部位置*/
}
#左.推送器{float:right；}
#右。推送器{float:left；}
* {
框大小：边框框；
-webkit框大小：边框框；
-moz框大小：边框框；
-o型盒尺寸：边框盒；
保证金：0；
填充：0；
}
.圆圈{
显示：块；
宽度：100px；/*img的一半宽度*/
高度：200px；/*img高度*/
}
#左边，圆圈{
浮动：对；
清楚:对,；
-外部webkit形状：矩形(
0px，
0,
200px，/*img的宽度*/
200px，/*进气歧管高度*/
50%,
50%
);
}
#对，圈{
浮动：左；
清除：左；
-外部webkit形状：矩形(
-100px，/*0-img的宽度*/
0,
200px，/*img的宽度*/
200px，/*进气歧管高度*/
50%,
50%
);
}
p{
浮动：左；
宽度：50%；
溢出：隐藏；
文本对齐：居中；
}
img{
位置：绝对位置；
顶部：100px；
左：50%；
左边距：-100px；
宽度：200px；
高度：200px；
边界半径：50%；
溢出：隐藏；
}

Lorem ipsum是一种伪拉丁语文本，用于网页设计、排版、布局和印刷，以取代英语，强调设计元素而非内容。它也称为占位符（或填充符）文本。这是一个方便的实体模型工具。它有助于概述文档或演示文稿的视觉元素，例如排版、字体或布局。Lorem ipsum主要是古典作家和菲洛舍尔·西塞罗（philospher Cicero）的拉丁语文本的一部分。它的单词和字母被添加或删除而改变，因此故意使其内容变得毫无意义；它不再是真正的、正确的或可理解的拉丁语了。虽然lorem ipsum仍然类似于经典的lorem ipsum，但它是一种伪拉丁文本，用于网页设计、排版、布局和印刷，以取代英语，强调设计元素而非内容。它也称为占位符


Lorem ipsum是一种伪拉丁语文本，用于网页设计、排版、布局和印刷，以取代英语，强调设计元素而非内容。它也称为占位符（或填充符）文本。这是一个方便的实体模型工具。它有助于概述文档或演示文稿的视觉元素，例如排版、字体或布局。Lorem ipsum主要是古典作家和菲洛舍尔·西塞罗（philospher Cicero）的拉丁语文本的一部分。它的单词和字母被添加或删除而改变，因此故意使其内容变得毫无意义；它不再是真正的、正确的或可理解的拉丁语了。而lorem ipsum的仍然类似于古典拉丁语。Lorem ipsum是一种伪拉丁语文本，用于网页设计、排版、布局和印刷，以取代英语，强调设计元素而非内容。它也称为占位符

你能解释一下“要在图像上方环绕的文本”是什么意思吗？你想让图像放低一点，让柱子在顶部抱住它吗？@ChrisHardie我会解释我想做什么。我试着把图像放在文本的中心，让文本像你说的那样拥抱图像。这就是为什么我尝试使用

CSS形状

，但由于某些原因，我的浏览器不支持它。如果你知道

CSS形状

，那将是令人惊讶的，因为这正是我试图学习的。我刚刚决定解决这个问题，所以我不再使用

CSS形状

html, body {
    margin: 0;
    padding: 0;
}

* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
}

#circle-left {
    shape-outside: circle(50% 50% 50%); /* CSS Shapes, my browser is not supporting this sadly */
    float: right;
    width: 200px;
    height: 200px;
    border: 1px solid brown;
    border-radius: 50%;
    display: block;
    margin-right: -100px;
}

#circle-right {
    shape-outside: circle(50% 50% 50%);
    float: left;
    width: 200px;
    height: 200px;
    border: 1px solid brown;
    border-radius: 50%;
    display: block;
    margin-left: -100px;
}

.left {
    float: left;
    width: 50%;
    overflow: hidden;
}

.fox {
    position: absolute;
    top: 16px;
    left: 50%;
    margin-left: -100px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid brown;
}