1

我有四个进度条。它们应该留在灰色区域容器内。相反，它位于页脚下方，如下面的图像屏幕截图所示。

酒吧的代码是为了让我可以将它们定位在周围，而不仅仅是固定在一个区域。

这是进度条的代码：

HTML：

<section class="container">
    <section class="wrapper">
        <div class="meter"> <span style="width: 90%"></span>

        </div>
        <div class="meter"> <span style="width: 70%"></span>

        </div>
        <div class="meter"> <span style="width: 50%"></span>

        </div>
        <div class="meter"> <span style="width: 90%"></span>

        </div>
    </section>
</section>

CSS：

.container {
    position: relative;
}

.wrapper {
    position: absolute;
    right: 0;
    top: 90px;
}

.meter {
    height: 15px;
    /* Can be anything */
    margin-bottom: 10px;
    background: #555;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    border-radius: 25px;
    width: 210px;
    padding: 0px;
    -webkit-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
    -moz-box-shadow : inset 0 -1px 1px rgba(255, 255, 255, 0.3);
    box-shadow : inset 0 -1px 1px rgba(255, 255, 255, 0.3);
}
.meter > span {
    display: block;
    height: 100%;
    -webkit-border-top-right-radius: 8px;
    -webkit-border-bottom-right-radius: 8px;
    -moz-border-radius-topright: 8px;
    -moz-border-radius-bottomright: 8px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-bottom-left-radius: 20px;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-bottomleft: 20px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    background-color: rgb(43, 194, 83);
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(43, 194, 83)), color-stop(1, rgb(84, 240, 84)));
    background-image: -webkit-linear-gradient(center bottom, rgb(43, 194, 83) 67%, rgb(84, 240, 84) 69%);
    background-image: -moz-linear-gradient(center bottom, rgb(43, 194, 83) 37%, rgb(84, 240, 84) 69%);
    background-image: -ms-linear-gradient(center bottom, rgb(43, 194, 83) 37%, rgb(84, 240, 84) 69%);
    background-image: -o-linear-gradient(center bottom, rgb(43, 194, 83) 37%, rgb(84, 240, 84) 69%);
    -webkit-box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
    position: relative;
    overflow: hidden;
}
4

2 回答 2

0

You have the right idea. You are however putting your wrapper positioned relative to the empty section.container. The section.container has no width and height set so you get the element not going where you think it should.

Simply give your container a min-height of your choosing, and you can move it within it's boundaries.

 <section class="container" style="min-height: 300px;">
   <section class="wrapper">
     <div class="meter"> <span style="width: 90%"></span>
     </div>
      ...
   </section>
 </section>

I would also put your page's content into your section.container (the p tags in this case). Then you can move the bars anywhere on your page.

position: absolute lets you specify coordinates (top, bottom, left right) to move around in something position: relative. If that relative thing has no width (or less width than the element you're positioning, then you're bound to get footers under things and such.

于 2013-07-10T21:28:22.623 回答
0

添加这些新的 CSS 看看？

.wrapper {
    position:relative;
    top:20px;
    left:100px;
    padding:
}
.container {
    position:relative;
    float:left;
    top:0;
    left:0;
    width:100%;
    height:auto;
}
#footer{
    position:absolute;    
    left:0;
    bottom:0;
}
于 2013-07-10T02:52:17.747 回答