由于我的浏览器只支持20％(应该仍然支持我正在使用的),我想我会开始解决这个问题并尝试新的东西.
我试图将图像放在文本的中心,让文本从顶部拥抱图像.如果你向#circle-left /#cirlce-right添加一个margin-top,你会看到图像上方的空白区域,这里是一个JSFIDDLE.
如果您想尝试CSS Shapes,请单击此link并按照步骤在浏览器上启用它们.
This section is not normative.
Shapes define arbitrary geometries that can be used as CSS values.
This specification defines properties to control the geometry of an
element’s float area. The shape-outside property uses shape values to
define the float area for a float.Note: Future levels of CSS Shapes will allow use of shapes on elements
other than floats. Other CSS modules can make use of shapes as well,
such as CSS Masking [css-MASKING] and CSS Exclusions
[CSS3-EXCLUSIONS].Note: If a user agent implements both CSS Shapes and CSS Exclusions,
the shape-outside property defines the exclusion area for an
exclusion.Note: A future level of CSS Shapes will define a shape-inside
property,which will define a shape to wrap content within the
element.
我已经以各种方式达到了我想要的效果,除了我无法将文本包裹在图像/容器上方.我使用了边距,填充,顶部和相对定位.
这是我的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形状或我怎么能这样做？我想保留它只对css但如果需要javascript我会试一试.
我不是试图支持所有浏览器或任何这种性质的东西,只是试图学习adobe正在开发的新工具.
资源
解决方法
.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,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,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,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,or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin. Lorem ipsum is a pseudo-Latin text used in web design,and printing in place of English to emphasise design elements over content. It's also called placeholder
</p>
