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

概述我有一个用 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的方框内放置一个圆圈？所遇到的程序开发问题。

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