这是一个纯粹的 html/css 问题，就这样吧.. 我的页面布局右侧有一个 float div，如果我的屏幕尺寸太小(或者如果将浏览器窗口调整为较小的设置)，我需要它消失。假设它像这样简单:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Layout test</title>
<link href="simple.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<h1>Welcome</h1>
<div id="right-div">
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</div>
<div id="main">
<p>Some content goes here!</p>
</div>
</body>
</html>
假设它也有这个简单的 CSS:
#main {
border: 1px solid black;
width: 800px;
height: 500px;
padding: 7px;
margin-left: auto;
margin-right: auto;
position: relative;
z-index: 10;
}
#right-div {
border: 1px solid black;
float: right;
width: 200px;
position: relative;
z-index: 9;
}
截至目前，如果我减小窗口大小，id 为 right-div 的 div 开始与“main”div 重叠。如果屏幕尺寸很小(或越来越小)，我需要知道如何让它消失或隐藏。
我怎样才能做到这一点？ 预先感谢大家的帮助，
J.
最佳答案
使用媒体查询。示例:
@media all and (max-width: 300px) {
.floated_div { display: none; }
}
jsFiddle Example 。调整输出区域的大小，直到它小于 300px 以查看效果。
参见 this IE 兼容性的答案。
关于css - 如何使 float 的 div 在较小的屏幕上消失？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7043336/