空div长不了
空div长不了
提问于 2015-07-05 21:15:36
我试图熟悉使用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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-07-05 21:23:03
有几个问题。而不是只指定max-width，您应该指定一个width (以及高度)。它是一个内联块元素，根据其内容大小，但是由于没有内容，您应该帮助它。
还有，你拼错了background。
最后，rem(300)不起作用。rem (根em)是一个单元，可以像下面为.circle-2所做的那样像em或px一样使用，但不能作为函数使用。我想你是从SASS，SCSS或者更少的例子中抄袭的。
@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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31235066
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号