我有一个用 HTML 和 CSS 制作的网页,我想在其中的方框内放置一个圆圈。这是 fiddle对于网页。
此刻,我可以制作一个包含一些文字的正方形,但我无法在方框内放置一个圆圈。这是 pictorial representation我想要的。
我为方框使用的 HTML 和 CSS 代码是:
<div class="rectangles">
<div class="rectangle">
<p class="ceo">Will's profile, CEO</p>
<p class="ceo-words">Say something inspiring will</p>
</div>
<div class="rectangle">
<p class="cfo">Jacks Profile, CFO</p>
<p class="cfo-words">Say something inspiring jack</p>
</div>
<div class="rectangle">
<p class="cto">Zeeshan, CTO</p>
<p class="cto-words">Say something inspiring </p>
</div>
<div class="rectangle">
<p class="future">Whoever yall hire next</p>
<p class="future-words">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 class="rectangles">
<div class="rectangle">
<div class="circle"></div>
<p class="ceo">Will's profile, CEO</p>
<p class="ceo-words">Say something inspiring will</p>
</div>
<div class="rectangle">
<div class="circle"></div>
<p class="cfo">Jacks Profile, CFO</p>
<p class="cfo-words">Say something inspiring jack</p>
</div>
<div class="rectangle">
<div class="circle"></div>
<p class="cto">Zeeshan, CTO</p>
<p class="cto-words">Say something inspiring </p>
</div>
<div class="rectangle">
<div class="circle"></div>
<p class="future">Whoever yall hire next</p>
<p class="future-words">Say something inspiring </p>
</div>
</div>
关于html - 如何在css中的方框内放置一个圆圈?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45685511/