我正在尝试使用 codepen.io 熟悉 css 动画，但我似乎无法扩大 div 的大小。似乎有一个我忽略的简单解决方案。谁能帮忙？
代码笔:http://codepen.io/trebey/pen/PqRZKK
@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;
}<html>
<body>
<div class="square-1"></div>
<div class="circle-1"></div>
<div class="circle-2"></div>
<div class="square-2"></div>
</body>
</html>最佳答案
有几个问题。您不应仅指定 max-width，而应指定 width(以及高度)。它是一个根据其内容调整大小的行内 block 元素，但由于没有内容，您应该稍微帮助一下。
此外，您拼错了 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>关于html - 空的 div 不会增长，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31235066/