如何获得孩子身高的绝对位置?

穆罕默德·卡利菲

你好,我正在开发css和jquery slide.i在相同位置中具有绝对位置的多个div和相同的顶部和左侧位置,然后我使用了fadein和fadeout功能来切换滑块。有一个class滑块class2的父div,其中包含所有的滑块项目,现在我的问题是slider2的高度和底部都不会与滑块集合在一起。这是我的代码:

 <div class="row no-margin">
    <div class="col-md-12 no-margin">
        <div class="slider2" id="slider_custom">
            @if (slides != null)
            {
                foreach (var item in slides)
                {
                    if (item.MenuPathId != null)
                    {
                        MenuPath menuPath = db.MenuPaths.Find(item.MenuPathId);
                        path = "/MenuPages/Page?PageName=" + menuPath.PageName;
                    }
                    else
                    {
                        path = item.Path;
                    }
                    <div class="slider-item" id="item@(item.Id)">
                            <img src="@item.Photo"/>
                            <div class="slider-caption">
                                <p class="slider-title">@((lang == "fa-IR") ? item.Title_fa : (lang == "en-US") ? item.Title_en : item.Title_ar)</p>
                                <p class="slider-text"> @((lang == "fa-IR") ? item.Description_fa : (lang == "en-US") ? item.Description_fa : item.Description_ar)</p>
                            </div>

                    </div>

                }

                <div class="slider-arrow">
                    <a href="#" class="left-anchor" id="left_anchor">
                        <i class="glyphicon glyphicon-chevron-left"></i>
                    </a>
                    <a href="#" class="right-anchor" id="right_anchor">
                        <i class="glyphicon glyphicon-chevron-right"></i>
                    </a>
                </div>
                <div class="top-slider-image">
                    <img src="~/Content/images/LOGO 4 SITE2.png"/>
                </div>
            }

        </div>
    </div>
</div>

还有我的CSS

    .slider2{
    position:relative;

}
.slider-item{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:auto;
    display: none;   

}
.slider-item:first-child{
    display: block;
}
.slider-item img{
    width:100%;
    min-height:300px;
}
.no-margin{margin:0;
padding:0;}
.left-anchor{
    padding:20px 10px; 
    float:left;
    background-color:rgba(0,0,0,0.20);
    color:white;
    font-size:24px;
    font-weight: 800;
}
.right-anchor{
    padding:20px 10px;
    float:right;
    background-color:rgba(0,0,0,0.20);
    color:white;
    font-size:24px;
    font-weight: 800;
}
.right-anchor:hover{
    color:#f0f0f0;
}

.left-anchor:hover{
    color:#f0f0f0;
}

.slider-arrow{
    position: absolute;
    width: 100% ;
    top:calc(50% - 35px);
    opacity: 1;
    transition-property: opacity;
    transition-duration: 0.5s;
}
.faded{
    opacity:1;
}
.faded-out{
    opacity:0.1;

}
.top-slider-image{
    position: absolute;
    /*z-index:4;*/
    top:-1px;
}
.top-slider-image img{
    width: 100%;

}
.slider-caption{
    width: 100%;
    position:absolute;
    top:calc(50% - 34px);
text-align: center;    
    padding:0 150px;
}
.slider-title{
    font-size:40px;
    color:white;
    text-shadow: 0px 0px 35px #4c4c4c, 1px 1px 35px #333333, 0px 0px 35px #5a5a5a, 1px 0px 35px #484848, 0px 1px 35px #7b7b7b
    }
.slider-text{
    font-size:20px;
    color:white;
    text-shadow: 0px 0px 15px #808080, 1px 1px 15px #636363, 0px 0px 15px #5a5a5a, 1px 0px 15px #7d7d7d, 0px 1px 15px #7b7b7b;
}
@media only screen and (max-width:992px) {

    .slider-caption{
        text-align: center;
        padding:0 100px;
    }
    .slider-title{
        font-size:30px;
        color:white;
        text-shadow: 0px 0px 35px #4c4c4c, 1px 1px 35px #333333, 0px 0px 35px #5a5a5a, 1px 0px 35px #484848, 0px 1px 35px #7b7b7b
    }
    .slider-text{
        font-size:15px;
        color:white;
        text-shadow: 0px 0px 15px #808080, 1px 1px 15px #636363, 0px 0px 15px #5a5a5a, 1px 0px 15px #7d7d7d, 0px 1px 15px #7b7b7b;
    }
}
@media only screen and (max-width:768px) {

    .slider-caption{
        text-align: center;
        padding:0 50px;
    }
    .slider-title{
        font-size:16px;
        color:white;
        text-shadow: 0px 0px 35px #4c4c4c, 1px 1px 35px #333333, 0px 0px 35px #5a5a5a, 1px 0px 35px #484848, 0px 1px 35px #7b7b7b
    }
    .slider-text{
        font-size:14px;
        color:white;
        text-shadow: 0px 0px 15px #808080, 1px 1px 15px #636363, 0px 0px 15px #5a5a5a, 1px 0px 15px #7d7d7d, 0px 1px 15px #7b7b7b;
    }
}
@media only screen and (max-width:597px) {

    .slider-caption{
        text-align: center;
        padding:0 20px;
    }
    .slider-title{
        font-size:14px;
        color:white;
        text-shadow: 0px 0px 35px #4c4c4c, 1px 1px 35px #333333, 0px 0px 35px #5a5a5a, 1px 0px 35px #484848, 0px 1px 35px #7b7b7b
    }
    .slider-text{
        font-size:12px;
        color:white;
        text-shadow: 0px 0px 15px #808080, 1px 1px 15px #636363, 0px 0px 15px #5a5a5a, 1px 0px 15px #7d7d7d, 0px 1px 15px #7b7b7b;
    }
}

现在Slider2和col和row不会变高。我使用jQuery来获取具有最大高度的元素并将其分配给slider2 div。但是有时它有时会得到零高度。我认为图片加载之前会达到高度。有什么建议?

夸大

绝对定位的元素不会影响父级的高度。您可以将其中一项/图像作为静态/相对放置.slider2在幻灯片容器的内部和外部。然后用opacity:0;其隐藏,visibility: hidden;然后.slider2将其保持高度。另一种解决方案是,.slider2如果您确定幻灯片永远不会为空,请自行设置高度。欲了解更多信息,请使用CSS清除绝对定位的元素吗?

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章