Question

我试图使用codepen.io熟悉css动画，但我似乎无法使div扩大。似乎有一个简单的解决方案，我只是忽略。有人可以帮忙吗？

codepen：http://codepen.io/trebey/pen/PqRZKK

＆＃13;

@import 'bourbon';
@import 'neat';

div {
  display: inline-block;
}

.circle-1 {
  max-height: 100px;
  max-width: 100px;
  border: 1px solid #333;
  border-radius: 20%;
  backgrouund: #000;

}

.circle-2 {
  max-height: rem(300);
  max-width: rem(300);
  border: 1px solid #333;
  border-radius: 20%;
  backgrouund: #333;
}

.square-1 {
  max-height: rem(300);
  max-width: rem(300);
  border: 1px solid #333;
  backgrouund: #000;
}

.square-2 {
  max-height: rem(300);
  max-width: rem(300);
  border: 1px solid #333;
  backgrouund: #000;
}

＆＃13;

<html>

  <body>
    <div class="square-1"></div>
    <div class="circle-1"></div>
    <div class="circle-2"></div>
    <div class="square-2"></div>
  </body>

</html>

＆＃13;

Answer 1

有几个问题。您应该指定max-width（以及高度），而不是仅指定width。它是一个内联块元素，可以根据其内容进行调整，但由于没有内容，您应该稍微帮助它。

另外，你拼错了background。

最后，rem(300)不起作用。 rem（根em）是一个单位，可以像em或px一样使用，就像我在.circle-2中所做的那样，但不能作为函数使用。我想你是从SASS，SCSS或LESS的例子中复制过来的。

@import 'bourbon';
@import 'neat';

div {
  display: inline-block;
}

.circle-1 {
  height: 100px;
  width: 100px;
  border: 1px solid #333;
  border-radius: 20%;
  background: #000;

}

.circle-2 {
  height: 3rem;
  width: 3rem;
  border: 1px solid #333;
  border-radius: 20%;
  background: #333;
}

.square-1 {
  height: rem(300);
  width: rem(300);
  border: 1px solid #333;
  background: #000;
}

.square-2 {
  height: rem(300);
  width: rem(300);
  border: 1px solid #333;
  background: #000;
}

<html>

  <body>
    <div class="square-1"></div>
    <div class="circle-1"></div>
    <div class="circle-2"></div>
    <div class="square-2"></div>
  </body>

</html>

空div不会长大

1 个答案: