将 CSS 元素塞入另一个元素

Question

这里又出现了另一个问题，可能是 child 为大家准备的游戏。

如果你不明白，标题我会解释。

基本上，我已经创建了一个进度条，我将把它放到我的投资组合网站上。

我遇到了一个小问题。 #ability div 在大多数情况下工作正常，但如果您将宽度属性更改为 1%-3%，它会与 #bar div 重叠，真的，我想要它去下面。有点难以解释。

宽度的当前值属性为 84%。改为1%-3%。如果你看了它，我相信你会明白我想要达到的效果：

<html>

<head>
  <title>Test Bars</title>
  <script type="text/javascript" src="jquery.min.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
</head>

<body>
  <div id="bar">
    <div id="nil">
      <div id="ability">
      </div>
    </div>
  </div>
</body>

</html>

CSS

#bar {
    width: 400px;
    height: 55px;
    background-color: aquamarine;
    border: 2px solid black;
    border-radius: 10px;
}

#nil {
    background-image: url('footer_lodyas.png'); /* Background pattern from subtlepatterns.com */
    width: 100%;
    height: 100%;
    border-radius: 7.5px;
    float: right;
}

#ability {
    width: 84%;
    height: 100%;
    background: red; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left, red , lime); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, red, lime); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, red, lime); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, red , lime); /* Standard syntax */
    border-bottom-right-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 7.5px;
    border-top-left-radius: 7.5px; 
 /*  border-radius: 7.5px; */
}

谢谢。

Answer 1

#bar 需要将溢出设置为 hidden:

#bar {
    overflow: hidden;
}

在 MDN 上阅读有关 CSS overflow property 的更多信息。

将 CSS 元素塞入另一个元素

Tucking a CSS element into another

html

css

portfolio