html - 如何在页面上定位 CSS 元素？没有位置属性？

Question

我用 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;
}

DEMO

(如果答案是某种类型的 float ，请注意当您在我上面提供的 CSS Desk 链接中添加“float: right;”时进度条会发生什么情况，请尝试向代码中添加 float 。进度条变为垂直对齐)

Answer 1

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

float: right;
clear: right;

这是 Fiddle .

狮子座!

编辑:如果您想“在您的控制下”移动一个元素(我没有想到更好的定义)并在容器内(我的意思是，与浏览器的窗口无关)只是添加这些 CSS 规则:

到父元素:

position: relative;

到子元素:

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

其中 top、right、left 和 bottom 属性是将元素 移动到“下面你的控制权”。

我希望你能理解我。

---

这是给 child 添加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 (学习网络技术的好网站 - 西类牙语)。