[英]How to create a horizontal line of three circles
What I'm trying to create 我正在尝试创造的
Using HTML5 and CSS3 only, a horizontal row of three circles, each sitting on top of a different image, containing another image and one word of text. 仅使用HTML5和CSS3,水平排列的三个圆圈,每个圆圈都位于另一张图片的顶部,其中包含另一张图片和一个文字单词。
What I have tried 我尝试过的
I have tried to create this by just adding divs within divs and specifying heights and widths, but this has not worked. 我试图通过仅在div中添加div并指定高度和宽度来创建此功能,但这没有用。 I sense I'm over-complicating something quite simple, or forgetting something very obvious.
我觉得我过于简单了一些事情,或者忘记了一些非常明显的事情。 What is the simplest way of doing this?
最简单的方法是什么?
A note Go easy on me! 注意事项放心吧! I've been trying to self-learn for only 2 months.
我一直在尝试自学仅两个月。
The HTML HTML
<div class="circlewrapper">
<div class="sector" id="read">
<img src="images/test1.jpg" class="image1" height="165" width="165" />
<div class="round" id="reading">
<img src="images/book.jpg" class="image2" height="20" width="20" />
<p id="readread">Read</p>
</div>
</div>
<div class="sector" id="listen">
<img src="images/test2.jpg" class="image1" height="165" width="165" />
<div class="round" id="listening">
<img src="images/book.jpg" class="image2" height="20" width="20" />
<p id="listlist">Listen</p>
</div>
</div>
<div class="sector" id="watch">
<img src="images/test3.jpg" class="image1" height="165" width="165" />
<div class="round" id="watching">
<img src="images/book.jpg" class="image2" height="20" width="20" />
<p id="watchwatch">Watch</p>
</div>
</div>
</div>
The CSS CSS
.circlewrapper {
width: 800px;
height: 270px;
padding: 0px;
margin: 0px auto 0px auto;}
.sector {
width: 250px;
height: 250px;
padding: 0px;
margin: 8px;
display: inline;}
.round {
height: 165px;
width: 165px;
padding: 0px;
margin: 0px auto 0px auto;
background-color: blue;
border-radius: 165px;
-moz-border-radius: 165px;
-webkit-border-radius: 165px;
z-index: 10;}
p {
text-align: center;
color: white;}
.image1 {
margin: 0px auto 0px auto;
padding: 0px;
z-index: 5;}
.image2 {
margin: 0px auto 0px auto;
padding: 0px;}
Add to .sector
float: left;
添加到
.sector
float: left;
. 。 It worked for me.
它为我工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.