Question

我一直在研究新的土坯CSS Shapes并且无济于事。

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

我正在尝试将图像放在文本的中心，让文本从顶部拥抱图像。如果您向margin-top / #circle-left添加#cirlce-right，则会在图片上方看到空白区域，此处为JSFIDDLE。

如果您想试用CSS Shapes，请点击此link，然后按照步骤在浏览器上启用它们。

本节不是规范性的。

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

注意：CSS Shapes的未来级别将允许在元素上使用形状   除了花车。其他CSS模块也可以使用形状，   例如CSS Masking [CSS-MASKING]和CSS Exclusions   [CSS3-排除事项]。

注意：如果用户代理同时实现了CSS形状和CSS排除，   shape-outside属性定义了一个排除区域   排斥。

注意：CSS Shapes的未来级别将定义一个shape-inside   property，它将定义一个形状来包装内容   元件。

我已经以各种方式达到了我想要的效果，除了我无法将文字包裹在图像/容器上方。我使用了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正在开发的新工具。

资源

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: