gpt4 book ai didi

html - 空的 div 不会增长

转载 作者:太空宇宙 更新时间:2023-11-04 03:01:32 24 4
gpt4 key购买 nike

我正在尝试使用 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)是一个单位,可以像 empx 一样使用,就像我在下面为 .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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com