1

我正在尝试创建的内容

仅使用 HTML5 和 CSS3，三个圆圈的水平行，每个圆圈位于不同图像的顶部，包含另一个图像和一个文本单词。

我试过的

我试图通过在 div 中添加 div 并指定高度和宽度来创建它，但这没有奏效。我觉得我把一些非常简单的事情过度复杂化了，或者忘记了一些非常明显的事情。最简单的方法是什么？

对我放轻松 ！我一直在尝试自学仅 2 个月。

的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>

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;}
4

1 回答 1

1

添加到.sector float: left;. 它对我有用。

于 2013-02-11T12:55:26.457 回答