如何让我的文字拥抱在我的图像顶部？

Question

我一直在研究新的土坯CSS Shapes,但遗憾的是无济于事.

由于我的浏览器只支持20%(应该仍然支持我正在使用的),我想我会开始解决这个问题并尝试新的东西.

我试图将图像放在文本的中心,让文本从顶部拥抱图像.如果您添加margin-top到#circle-left/ #cirlce-right你会看到上面的图片只是空白的空间,这里是一个的jsfiddle.

如果您想试用,CSS Shapes请点击此链接,然后按照步骤在浏览器上启用它们.

本节不是规范性的.

形状定义可用作CSS值的任意几何.此规范定义了用于控制元素浮点区域几何的属性.shape-outside属性使用形状值来定义浮动的浮动区域.

注意:CSS形状的未来级别将允许在浮动之外的元素上使用形状.其他CSS模块也可以使用形状,例如CSS Masking [CSS-MASKING]和CSS Exclusions [CSS3-EXCLUSIONS].

注意:如果用户代理同时实现CSS形状和CSS排除,则shape-outside属性定义排除的排除区域.

注意:未来级别的CSS形状将定义一个shape-in​​side属性,该属性将定义一个形状以包含元素内的内容.

我已经以各种方式达到了我想要的效果,除了我无法将文本包裹在图像/容器上方.我已经使用margin,padding,top,和定位它relative.

这是我的CSS,(JSFIDDLE)

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;
}

那里有没有人知道CSS Shapes或如何解决这个问题？我想保留它只对css但如果需要javascript我会试一试.

我不是试图支持所有浏览器或任何这种性质的东西,只是试图学习adobe正在开发的新工具.

资源

• Adobe Shapes

• W3C第1部分

• W3C第2部分

Answer 1

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

.pusher {
    display: block;
    width: 0px;
    height: 100px;  /* top pos of img */
}
#left .pusher  { float: right; }
#right .pusher { float: left;  }

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

.circle {
    display: block;
    width: 100px; /* half width of img */
    height: 200px; /* height of img */
}
#left .circle {
    float: right;
    clear: right;
    
    -webkit-shape-outside: rectangle(
        0px,
        0,
        200px, /* width of img */
        200px, /* height of img */
        50%,
        50%
    );
}
#right .circle {
    float: left;
    clear: left;
    
    -webkit-shape-outside: rectangle(
        -100px, /* 0 - width of img */
        0,
        200px, /* width of img */
        200px, /* height of img */
        50%,
        50%
    );
}

p {
    float: left;
    width: 50%;
    overflow: hidden;
    
    text-align: center;
}

img {
    position: absolute;
    top: 100px;
    left: 50%;
    margin-left: -100px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
}

<img src="https://placehold.it/200x200" />
<p id="left">
    <span class="pusher"></span>
    <span class="circle"></span>
    Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philospher Cicero. It's words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder
</p>
<p id="right">
    <span class="pusher"></span>
    <span class="circle"></span>
    Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philospher Cicero. It's words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin. Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder
</p>