代码之家 › 专栏 › 技术社区 › 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 回复 | 直到 12 年前

Alex 14 年前

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

Community CDub 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()
});

推荐文章

Newbie_Coder · 如何使用Jquery无画布裁剪框架

1 年前

usman610 · Javascript代码在点击回车键和点击按钮时删除行

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Carly · 在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

1 年前

Community wiki · jquery弹出窗口不会用按键关闭,但会点击

1 年前

Community wiki · Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?

1 年前

Community wiki · 无法从jquery文档调用函数

2 年前

marzouk najib · Uncaught ReferenceError:未定义FullCalendar

2 年前

Pepe · 检查“data”属性是否包含输入值的一部分(jQuery)

2 年前

laurence keith albano · 如何使用Jquery在父类内添加子父类

2 年前