HTML – 如何在css的方框内放置一个圆圈?

HTML – 如何在css的方框内放置一个圆圈?,第1张

概述我有一个用 HTML和CSS制作的网页,我想在一个方框内放一个圆圈.这是网页的 fiddle. 此刻,我可以制作一个包含一些单词的正方形,但我无法在方框内放一个圆圈.这是我想要的pictorial representation. 我用于方框的HTML和CSS代码是: <div class="rectangles"> <div class="rectangle"> 我有一个用 HTML和CSS制作的网页,我想在一个方框内放一个圆圈.这是网页的 fiddle.

此刻,我可以制作一个包含一些单词的正方形,但我无法在方框内放一个圆圈.这是我想要的pictorial representation.

我用于方框的HTML和CSS代码是:

<div >            <div >                <p >Will's profile,CEO</p>                <p >Say something inspiring will</p>            </div>            <div >                <p >Jacks Profile,CFO</p>                <p >Say something inspiring jack</p>            </div>            <div >                <p >Zeeshan,CTO</p>                <p >Say something inspiring </p>            </div>            <div >                <p >Whoever yall hire next</p>                <p >Say something inspiring </p>            </div>        </div>
解决方法 使用CSS添加新元素和样式.这样您就可以在其中包含内容和图像.

.rectangles .rectangle {    border-radius: 10px;    display: inline-block;    margin-bottom: 30px;    margin-right: 5px;    wIDth: 350px;    height: 100px;    border: 1px solID #000;    background-color: white;    padding: 10px 10px 10px 100px;    position: relative;}.rectangles .rectangle .circle {  background: #aaa;  border-radius: 100%;  height: 60px;  wIDth: 60px;  position: absolute;  top: 20px;  left: 20px;}
<div >    <div >        <div ></div>        <p >Will's profile,CEO</p>        <p >Say something inspiring will</p>    </div>    <div >        <div ></div>        <p >Jacks Profile,CFO</p>        <p >Say something inspiring jack</p>    </div>    <div >        <div ></div>        <p >Zeeshan,CTO</p>        <p >Say something inspiring </p>    </div>    <div >        <div ></div>        <p >Whoever yall hire next</p>        <p >Say something inspiring </p>    </div></div>
总结

以上是内存溢出为你收集整理的HTML – 如何在css的方框内放置一个圆圈?全部内容,希望文章能够帮你解决HTML – 如何在css的方框内放置一个圆圈?所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1058085.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-25
下一篇 2022-05-25

发表评论

登录后才能评论

评论列表(0条)

保存