css display有点麻烦：无。问题是我想在大屏幕上隐藏包含转发器的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：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();
}
答案 0 :(得分：2)
尝试在媒体查询之外使用display: block;，然后使用min-width查询覆盖它，如下所示：
#imgList {
display: block;
}
@media screen and (min-width: 800px) {
#imgList {
display: none;
}
}
这会将其隐藏在宽度800px之上。
答案 1 :(得分：1)
我将您的代码复制到一个简单的HTML文档中并运行它，它在Chrome中完美运行。
我检查了元素，实际上，当屏幕很大时，它是隐藏的，但是当它很小时，它会显示出来。这意味着代码中的其他位置有一种覆盖媒体查询的样式。最有可能的是，代码中的某个地方（可能是你的引导）正在显示它。
要找出它在做什么，进入chrome或firefox（我使用chrome，因此它在firefox中可能有点不同）并右键单击应隐藏的元素并选择inspect元素。向上移动，直到你位于具有id =“imgList”的div上，你应该能够看到影响它的每个CSS样式。被划掉的人被其他人覆盖，通常是名单上的更高者。我打赌你会找到一个显示：没有划掉的块。
答案 2 :(得分：0)
@media screen and (min-width: 800px) {
当屏幕宽度至少为800px时，此代码将运行。
@media screen and (max-width:800px) {
当屏幕宽度小于800px时，此代码将运行。
你想要显示什么屏幕宽度隐藏它？
除非必要，否则我也不会在CSS中混合使用min和max个查询。我个人喜欢从小开始，只使用min个查询。所以我的默认样式在移动设备上运行，然后为平板电脑/平板电脑设置min，为小型桌面设置另一个min，为宽屏幕设置最终min。这样，当我下载我的CSS文档时，我知道当屏幕变大时，底部的样式会覆盖顶部的样式。我根本不必使用max个查询。在我看来，使用两者可能会让人感到非常困惑。
答案 3 :(得分：-1)
您是否尝试过使用display:none !important;？我在CSS媒体查询中发现，在隐藏或显示不同宽度的内容时，我必须使用!important。