1
私は円の形（border-radius：50％）でdivを作成し、私のdiv要素の形状（形状-外：。アトリビュートの位置（相対、絶対）または浮動小数点型を使用したシェイプ - 外側
-
：円（50％）が
私の形状の位置：絶対を使用すると、divは他の要素（私の段落が含まれている）の流れから取り除かれるため、要素の近くに配置するとテキストは移動しません。
属性positionを使用している場合：relative with float：left divの位置がそのまま残っているため、shape-outside：circle（50％）が機能し、divは移動しませんが、大文字小文字の場合は、形状外の属性が実空間に適用されます（divのwithとheightは、スペース全体に要素の位置を加えたものになります）。
これまでのところは良い問題は、しかし、私はので、それをスタイルする位置の属性を使用することはできませんよということです
これは、属性の位置と私の例である：相対：
<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;
}
は、誰もが今まで私と同じ問題があったのか？
だけ明確にする、私はそのような何か得るためにしようとしている：
多くのことができますつまり、あなたが生成されたコードを投稿するjsfiddleを使用するようにしてください。 – Adriano
私はむしろ実際のウェブサイトを使用したいと思いますが、まだ開発段階です。私は1時間ほどで投稿します – Matto