Question

我正在使用带有悬停效果的5张横幅图片并使用下面的代码

#banner
{
    float:left;
    width:99.025%;
    padding:0 0 0 10px;
    margin:0;
    height: 16.714em; /* 234px*/
    position:relative;
    overflow:hidden;
    display:block;
    background:url('/pages/images/bottom_wood_repeater.jpg') 0 104px repeat-x;
}

#banner img
{
    float:left;
    width:19.435%; /*197px;*/
}

#banner a img
{
    float:left;
    display:block;
}

#banner a:hover img
{
    float:left;
    position:relative;
    top:-16.714em; /* 234px*/
}

我可以使用百分比而不是em吗？

height: 16.714em; /* 234px*/

实际上我正在创建响应式设计，它会为较小的分辨率或移动设备带来问题。

当前网站：http://new.brandonplanning.com/home

提前致谢：）

Answer 1

是和否。

具体来说，如果父元素没有固定的高度，你可以不这样做。想一想：如果一个元素的高度等于其父级高度的百分比，那么需要首先计算父级的高度。但要计算父母的身高，首先需要计算孩子的身高。但在计算这个孩子的身高之前，您需要计算父母的身高。你会看到它的发展方向。

如果父确实具有固定的高度，那么对孩子的百分比高度就可以了。

如果父母的不具有固定的身高，并且您为孩子设置了百分比高度，则浏览器会放弃并将该孩子视为height: auto。

Answer 2

我可以使用百分比而不是em吗？

是的，你可以。使用height:25%;但如果考虑其他属性，可能无法达到您想要的效果。

高度可以是

auto - 浏览器计算高度。这是默认的

length - 以px，cm等为单位定义高度

％ - 定义包含块的高度百分比

如果您仍然遇到布局问题，可以检测客户端是否在移动设备上，并使用不同的CSS显示它们。

Answer 3

确保将“％”符号添加到您的css中，您始终可以使用％。

Answer 4

我不明白为什么不。从技术上讲，它没关系。你尝试过使用％吗？

Answer 5

简单地说，我们在css中使用百分比高度。

我们可以在css中使用百分比高度吗？

5 个答案: