Question

你好，我正在开发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;
    }
}

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

Answer 1

绝对定位的元素不会影响父级的高度。您可以将其中一个项目/图像作为静态/相对位置放置在.slider2内部和幻灯片容器外部。然后用opacity:0;或visibility: hidden;隐藏它，然后.slider2将具有此项的高度。另一种解决方法是，如果您确定幻灯片永远不会为空，请自行设置.slider2的高度。有关更多信息，请查看Clear absolutely positioned elements with CSS possible?

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

1 个答案: