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 प्रॉपर्टी से आता है जो सभी नवीनतम ब्राउज़रों में समर्थित है — लेकिन इंटरनेट एक्सप्लोरर में नहीं।
