Css 显示 none 无法处理 div 及其内容

Question

css display:none 有点麻烦。问题是我想在大屏幕上隐藏一个包含中继器的 div，但在浏览器中测试时 div 及其内容仍然存在。我想隐藏的 div 具有 id imgList

我不确定问题出在哪里。任何帮助将不胜感激。

html

 <div class="row">
            <div id="slideShowContainer" class="col-md-12">

        <div id="slideShow" class="slideshow ">
            <div id="slideShowWindow">
                <asp:Repeater ID="rptSlides" runat="server" ClientIDMode="Static">
                    <ItemTemplate>
                        <div class="slide">
                            <img runat="server" src='<%#DataBinder.Eval(Container.DataItem,"Value") %>' width="650" height="450" />
                        </div>
                    </ItemTemplate>
                </asp:Repeater>

            </div>
        </div>

            </div>
            <div id="imgList" class="col-xs-12">


        <asp:Repeater id="rptShowPics" runat="server">
            <ItemTemplate>
                <div class="col-sm-12">
                    <img src='<%#DataBinder.Eval(Container.DataItem,"Value") %>'/>
                </div></div>
            </ItemTemplate>
                        </asp:Repeater>

            </div>

我的css:

img {
    width: 100%;
    height: auto;
}
@media screen and (min-width: 800px) {

#slideShowContainer {
    display: block;
}

#imgList {
    display:none;
}

#slideShow #slideShowWindow {
    width: 650px;
    height: 450px;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
}

    #slideShow #slideShowWindow .slide {
        margin: 0;
        padding: 0;
        width: 650px;
        height: 450px;
        float: left;
        position: relative;
    }


}

@media screen and (max-width:800px) {
#imgList {
    display:block;
}
#slideShowContainer {
    display: none;
}
}

正如我所说，我不确定问题出在哪里。幻灯片 div display:none 工作正常，我看不出有什么不同会导致这样的问题

编辑：

呈现的 html:

 <div class="col-sm-12">
        <span id="ContentPlaceHolder1_lblError"></span>
        <div class="row">
            <div id="slideShowContainer" class="col-md-12">

        <div id="slideShow" class="slideshow ">
            <div id="slideShowWindow">

                        <div class="slide">
                            <img src="Images/portfolioImages/shutterstock_10708540.jpg" width="650" height="450" />
                        </div>

                        <div class="slide">
                            <img src="Images/portfolioImages/shutterstock_1308456.jpg" width="650" height="450" />
                        </div>

                        <div class="slide">
                            <img src="Images/portfolioImages/shutterstock_15254098.jpg" width="650" height="450" />
                        </div>

                        <div class="slide">
                            <img src="Images/portfolioImages/shutterstock_1886302.jpg" width="650" height="450" />
                        </div>

                        <div class="slide">
                            <img src="Images/portfolioImages/shutterstock_2008768.jpg" width="650" height="450" />
                        </div>

                        <div class="slide">
                            <img src="Images/portfolioImages/shutterstock_2008770.jpg" width="650" height="450" />
                        </div>

                        <div class="slide">
                            <img src="Images/portfolioImages/shutterstock_2275868.jpg" width="650" height="450" />
                        </div>

                        <div class="slide">
                            <img src="Images/portfolioImages/shutterstock_2854978.jpg" width="650" height="450" />
                        </div>

                        <div class="slide">
                            <img src="Images/portfolioImages/shutterstock_77129413.jpg" width="650" height="450" />
                        </div>

                        <div class="slide">
                            <img src="Images/portfolioImages/shutterstock_77347582.jpg" width="650" height="450" />
                        </div>

                        <div class="slide">
                            <img src="Images/portfolioImages/shutterstock_80296861.jpg" width="650" height="450" />
                        </div>

                        <div class="slide">
                            <img src="Images/portfolioImages/shutterstock_80313958.jpg" width="650" height="450" />
                        </div>

                        <div class="slide">
                            <img src="Images/portfolioImages/shutterstock_8922649.jpg" width="650" height="450" />
                        </div>

                        <div class="slide">
                            <img src="Images/portfolioImages/shutterstock_9754504.jpg" width="650" height="450" />
                        </div>


            </div>
        </div>

            </div>
            <div id="imgList" class="col-xs-12">



                <div class="col-sm-12">
                    <img src='Images/portfolioImages/shutterstock_10708540.jpg'/>
                </div></div>

                <div class="col-sm-12">
                    <img src='Images/portfolioImages/shutterstock_1308456.jpg'/>
                </div></div>

                <div class="col-sm-12">
                    <img src='Images/portfolioImages/shutterstock_15254098.jpg'/>
                </div></div>

                <div class="col-sm-12">
                    <img src='Images/portfolioImages/shutterstock_1886302.jpg'/>
                </div></div>

                <div class="col-sm-12">
                    <img src='Images/portfolioImages/shutterstock_2008768.jpg'/>
                </div></div>

                <div class="col-sm-12">
                    <img src='Images/portfolioImages/shutterstock_2008770.jpg'/>
                </div></div>

                <div class="col-sm-12">
                    <img src='Images/portfolioImages/shutterstock_2275868.jpg'/>
                </div></div>

                <div class="col-sm-12">
                    <img src='Images/portfolioImages/shutterstock_2854978.jpg'/>
                </div></div>

                <div class="col-sm-12">
                    <img src='Images/portfolioImages/shutterstock_77129413.jpg'/>
                </div></div>

                <div class="col-sm-12">
                    <img src='Images/portfolioImages/shutterstock_77347582.jpg'/>
                </div></div>

                <div class="col-sm-12">
                    <img src='Images/portfolioImages/shutterstock_80296861.jpg'/>
                </div></div>

                <div class="col-sm-12">
                    <img src='Images/portfolioImages/shutterstock_80313958.jpg'/>
                </div></div>

                <div class="col-sm-12">
                    <img src='Images/portfolioImages/shutterstock_8922649.jpg'/>
                </div></div>

                <div class="col-sm-12">
                    <img src='Images/portfolioImages/shutterstock_9754504.jpg'/>
                </div></div>


            </div>

另一个编辑：

万一这与我的代码有关或javascript它们如下。

JavaScript:

$(document).ready(function () {

    var currentPosition = 0;
    var slideWidth = 650;
    var slides = $('.slide');
    var numberOfSlides = slides.length;
    var slideShowInterval;
    var speed = 2000;



    slideShowInterval = setInterval(changePosition, speed);

    slides.wrapAll('<div id="slidesHolder"></div>');

    slides.css({ 'float': 'left' });

    $('#slidesHolder').css('width', slideWidth * numberOfSlides);


    function changePosition() {
        if (currentPosition == numberOfSlides - 1) {
            currentPosition = 0;
        } else {
            currentPosition++;
        }
        moveSlide();
    }


    function moveSlide() {
        $('#slidesHolder').animate({ 'marginLeft': slideWidth * (-currentPosition) });
    }

});

我的代码隐藏 (c#)

protected void Page_Load(object sender, EventArgs e)
{
    string[] filePaths = Directory.GetFiles(Server.MapPath("~/Images/portfolioImages/"));
    List<ListItem> files = new List<ListItem>();
    foreach (string filePath in filePaths)
    {
        string fileName = Path.GetFileName(filePath);
        files.Add(new ListItem(fileName, "Images/portfolioImages/" + fileName));
    }

    rptSlides.DataSource = files;
    rptSlides.DataBind();
    rptShowPics.DataSource = files;
    rptShowPics.DataBind();
}

Answer 1

您尝试过使用 display:none !important; 吗？我发现 CSS 媒体查询在以不同宽度隐藏或显示内容时必须使用 !important。

Answer 2

尝试让你的 display: block; 在媒体查询之外，然后用你的 min-width 查询覆盖它，像这样：

#imgList {
  display: block;
}

@media screen and (min-width: 800px) {

  #imgList {
    display: none;
  }
}

这会将其隐藏在 800px 宽度以上。

Answer 3

@media screen and (min-width: 800px) { 当屏幕宽度至少为 800 像素时，此代码将运行。

@media screen and (max-width:800px) { 当屏幕小于 800 像素宽时，此代码将运行。

您要显示的屏幕宽度是多少？

我也希望您不要在 CSS 中混合使用 min 和 max 查询，除非有必要。我个人喜欢从小处着手，只使用 min 查询。所以我在移动设备上的默认样式运行，然后我为 phablets/tablets 做一个 min，为小型桌面做另一个 min，最后为宽屏做一个 min。这样，当我查看 CSS 文档时，我知道随着屏幕变大，底部的样式会覆盖顶部的样式。我根本不需要使用 max 查询。在我看来，两者都使用会让人非常困惑，所以什么时候使用什么。

Answer 4

我将您的代码复制到一个简单的 html 文档中并运行它，它在 Chrome 中完美运行。

我查看了这个元素，的确，屏幕大的时候隐藏，屏幕小的时候显示。这意味着您代码中的其他地方有一种样式会覆盖您的媒体查询。最有可能的是，它正在显示在您的代码中的某处（可能是您的引导程序）。

要找出这是在哪里做的，进入 chrome 或 firefox（我使用 chrome 所以它在 firefox 中可能有点不同）并右键单击应该是的元素隐藏并选择检查元素。向上移动，直到您位于 id="imgList" 的 div 上，您应该能够看到影响它的每个 CSS 样式。划掉的被其他人覆盖，通常是列表中较高的人。我打赌你会找到一个没有被划掉的display:block。

Css 显示 none 无法处理 div 及其内容

Css display none not working on div and its contents

html

css

c#

jquery

webforms