Question

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

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

没有位置属性，它似乎保持正常移动，这很好，除了我现在想要在页面上移动条形码。

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

（如果答案是某种类型的浮点数，注意在上面提供的CSS Desk链接中添加“float：right;”时进度条会发生什么，请尝试在代码中添加一个浮点数。垂直对齐）

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属性要移动元素“在您的控制之下”。

我希望你能理解我。

这是将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;
}

enter image description here

正如您所看到的，该位置的引用是浏览器的窗口。

但是，如果您将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;
}

enter image description here

引用是父元素。

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

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

1 个答案: