代码之家 › 专栏 › 技术社区 › Salman Arshad

CSS相对绝对定位导致容器没有高度

css-position height css jquery

Salman Arshad · 技术社区 · 14 年前

我想创建包含在 <ul> :

<ul>
    <li><a href="images/01/large.jpg"><img src="images/01/default.jpg"></a></li>
    <li><a href="images/02/large.jpg"><img src="images/02/default.jpg"></a></li>
    <li><a href="images/03/large.jpg"><img src="images/03/default.jpg"></a></li>
    <li><a href="images/04/large.jpg"><img src="images/04/default.jpg"></a></li>
    <li><a href="images/05/large.jpg"><img src="images/05/default.jpg"></a></li>
    <li><a href="images/06/large.jpg"><img src="images/06/default.jpg"></a></li>
    <li><a href="images/07/large.jpg"><img src="images/07/default.jpg"></a></li>
    <li><a href="images/08/large.jpg"><img src="images/08/default.jpg"></a></li>
    <li><a href="images/09/large.jpg"><img src="images/09/default.jpg"></a></li>
    <li><a href="images/10/large.jpg"><img src="images/10/default.jpg"></a></li>
    <li><a href="images/11/large.jpg"><img src="images/11/default.jpg"></a></li>
    <li><a href="images/12/large.jpg"><img src="images/12/default.jpg"></a></li>
    <li><a href="images/13/large.jpg"><img src="images/13/default.jpg"></a></li>
</ul>
<style>
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        position: relative;
    }
    li {
        display: none;
        list-style-type:none;
        margin:0;
        padding:0;
        position: absolute;
    }
</style>

<ul> 但我真的必须——因为相对位置元素中的绝对位置元素意味着容器的高度为零,图像开始出现在其下面的内容上。

我正在使用jQuery,所以请引导我使用基于CSS和/或jQuery的解决方案。 请注意

$("ul").height(
    $("ul li:eq(0)").outerheight()
)

但是,在文档就绪时,图像不会加载,因此高度未知。我还试着加了一个延迟/等待 $("ul li:eq(0)").outerheight() > 0

3 回复 | 直到 11 年前

Alex 14 年前

我认为从相反的角度来做这件事在技术上会更好。从CSS中删除display:none;然后在页面加载时获取框的高度(这样,没有javascript的人仍然可以看到图像)。然后,通过javascript将li的display属性设置为none。

Community Egal 7 年前

例如:

var width, height;

$('ul img').load( function () {
    width  = this.width;
    height = this.height;
});

Get the real width and height of an image with JavaScript? (in Safari/Chrome)

Arnaud F. 14 年前

通过这样做?

$("ul").css({
   height: $("ul li:eq(0)").find("img").outerheight()
});

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前