0

我用 CSS 制作了 4 个进度条，并将它们插入到我的容器中，但是我无法让它们从左侧移动而不会弄乱，我希望它们如此，这样当人们调整浏览器窗口的大小时，它也会随之移动。

图片 1：当我添加“位置：___”属性时会发生这种情况：

快照

如果没有 position 属性，它似乎会保持并正确移动，这很好，除了我现在想在页面上随意移动条形。

HTML

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

CSS

.meter { 
  height: 15px;  /* Can be anything */
        margin-bottom: 10px;
  top: 80px;
    left: 600px;
    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;
}

演示

（如果答案是某种类型的浮动，请注意当您在上面提供的 CSS Desk 链接中添加“浮动：正确”时进度条会发生什么情况，请尝试在代码中添加浮动。进度条会垂直对齐）

4

1 回答 1

3

只需将这些 CSS 规则添加到.meter类中：

float: right;
clear: right;

这是小提琴。

狮子座！

编辑：如果你想移动一个元素“在你的控制之下”（我没有想到更好的定义）和容器内部（我的意思是，不是相对于浏览器的窗口）只需添加这些 CSS 规则：

到父元素：

position: relative;

到子元素：

position: absolute;
top: value;
right: value;
left: value;
bottom: value;

where top,right和properties 用于移动元素“在您的控制之下left” 。bottom

我希望你能理解我。

position: absolute这是添加到子级而不添加到父级之间的区别position: relative，并执行此操作：

标记：

<div>
  <img src="images/img.png" />
  <p>Lorem ipsum dolor sit amet....</p>
</div>

CSS：

div img {
  position: absolute;
  top:  50px; 
  left: 50px;
}

在此处输入图像描述

如您所见，定位的参考是浏览器的窗口。

但是，如果你添加position: relative;到父...

div {
  border: 2px solid #CCC;
  padding: 1em;
  margin: 1em 0 1em 4em;
  width: 300px;
  position: relative;
}

div img {
  position: absolute;
  top: 50px; 
  left: 50px;
}

在此处输入图像描述

引用是父元素。

图片来自http://www.librosweb.com（一个了解网络技术的好网站 - 西班牙语）。

于 2013-07-09T05:31:50.430 回答