我正在尝试构建一个圆形的 div (border-radius: 50%) 并切割这个元素周围的空间,这样文本将采用我的 div 的形状 (shape-outside: circle(50%) )。
到目前为止,问题是我无法使用位置的属性来设置它的样式,因为:
如果我在我的形状上使用 position:absolute,div 将从其他元素(包括我的段落)的流中取出,所以如果我将它放在元素附近,文本将不会移动.
如果我将属性 position:relative 与 float:left 一起使用,我的 div 的位置将保持在那里,因此 shape-outside: circle(50%) 将起作用并且我的 div 不会移动,但在在这种情况下,shape-outside 属性将应用于实际空间(div 的 with 和高度将占用整个空间加上元素的位置。
这是我的示例,属性position:relative:
<div class="box">
<div class="half">
<div class="rounded">
<img src="myimage" alt="logo new path">
</div>
<div class="shapeout"></div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
<div class="half">
<h1>Holiday Clinic Hours</h1>
<p>All walk-in clinic locations will be closed for the following holidays in December & January.</p>
<p>We are closed:</p>
<ul>
<li>Friday, December 22nd</li>
<li>Monday, December 25th</li>
<li>Tuesday, December 26th</li>
<li>Friday, December 29th</li>
</ul>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</div>
</div>
还有CSS:
.box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 0;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.half {
padding: 40px;
color: white;
}
.half:nth-of-type(1) {
background: #333333;
-ms-flex-preferred-size: 25%;
flex-basis: 25%;
max-width: 25%;
}
.half ul {
padding: 0;
}
.half li {
font-weight: bold;
list-style-type: none;
}
.half:nth-of-type(2) {
background: #0154A6;
-ms-flex-preferred-size: 75%;
flex-basis: 75%;
max-width: 75%;
}
.half h1 {
color: white;
}
.rounded {
width: 100px;
height: 100px;
background: white;
padding: 33px;
border-radius: 50%;
position: relative;
top: -1%;
left: -11%;
float: left;
shape-outside: circle(50%);
}
.rounded img {
width: 80px;
}
有没有人遇到过我同样的问题?
明确一点,我正在尝试获得类似的东西:
最佳答案
我删除(注释)了属性“display: flex;”在 css 中,我能够复制您在屏幕截图中向我们展示的布局。
这对您的场景有帮助吗?
.box {
display: -webkit-box;
display: -ms-flexbox;
/* display: flex; */
-webkit-box-flex: 0;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.half {
padding: 40px;
color: white;
}
.half:nth-of-type(1) {
background: #333333;
-ms-flex-preferred-size: 25%;
flex-basis: 25%;
max-width: 25%;
}
.half ul {
padding: 0;
}
.half li {
font-weight: bold;
list-style-type: none;
}
.half:nth-of-type(2) {
background: #0154A6;
-ms-flex-preferred-size: 75%;
flex-basis: 75%;
max-width: 75%;
}
.half h1 {
color: white;
}
.rounded {
width: 100px;
height: 100px;
background: white;
padding: 33px;
border-radius: 50%;
position: relative;
top: -1%;
left: -11%;
float: left;
shape-outside: circle(50%);
}
.rounded img {
width: 80px;
}
<div class="box">
<div class="half">
<div class="rounded">
<img src="myimage" alt="logo new path">
</div>
<div class="shapeout"></div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
<div class="half">
<h1>Holiday Clinic Hours</h1>
<p>All walk-in clinic locations will be closed for the following holidays in December & January.</p>
<p>We are closed:</p>
<ul>
<li>Friday, December 22nd</li>
<li>Monday, December 25th</li>
<li>Tuesday, December 26th</li>
<li>Friday, December 29th</li>
</ul>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</div>
</div>
关于html - 具有属性位置(相对、绝对)或 float 的 Shape-outside,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47400099/