วิธีห่อบล็อกข้อความย่อหน้ารอบองค์ประกอบวงกลมด้วย CSS
หากคุณต้องการให้การนำเสนอเนื้อหาของคุณน่าสนใจยิ่งขึ้นอีกเล็กน้อยและเป็นแบบนิตยสาร คุณสามารถใช้ CSS เพื่อทำให้ข้อความของคุณจัดแนวและตัดกับองค์ประกอบต่างๆ ในลักษณะที่น่าสนใจได้
ขั้นแรก มาเพิ่มเนื้อหา HTML:
<article class="post">
<img
class="circle"
src="https://www.fwz-elektrotechnik.de/wp-content/uploads/2014/11/Globus-Wikipedia-Kopie-1.png"
alt="A globus"
/>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia fuga
possimus dolorum ea, fugiat facere sapiente natus excepturi numquam
explicabo praesentium aliquid quam ut sint voluptas omnis, quis, est vitae?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia fuga
possimus dolorum ea, fugiat facere sapiente natus excepturi numquam
explicabo praesentium aliquid quam ut sint voluptas omnis, quis, est vitae?
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia fuga
possimus dolorum ea, fugiat facere sapiente natus excepturi numquam
explicabo praesentium aliquid quam ut sint voluptas omnis, quis, est vitae?
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia fuga
possimus dolorum ea, fugiat facere sapiente natus excepturi numquam
explicabo praesentium aliquid quam ut sint voluptas omnis, quis, est vitae?
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia fuga
possimus dolorum ea, fugiat facere sapiente natus excepturi numquam
praesentium aliquid quam ut sint explicabo praesentium aliquid quam ut sint
voluptas omnis, quis, est vitae?
</p>
</article>
สังเกตว่า <article>
องค์ประกอบมีคลาสที่เรียกว่า post
และ <img>
องค์ประกอบมีคลาสชื่อ .circle
.
เพิ่ม CSS ต่อไปนี้:
.post {
max-width: 800px;
margin: 3rem auto;
}
.circle {
float: right;
height: 30vw;
margin-left: 1rem;
margin-left: calc(1rem + 2vw);
object-fit: cover;
shape-outside: circle(50%);
width: 30vw;
}
ผลลัพธ์ควรมีลักษณะดังนี้:
ไม่เลวใช่มั้ย
"เวทย์มนตร์" มาจาก shape-outside
คุณสมบัติ CSS ซึ่งได้รับการสนับสนุนในเบราว์เซอร์ใหม่ล่าสุดทั้งหมด แต่ไม่ใช่ใน Internet Explorer