Html 如何使小屏幕的浮动 div 消失？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7043336/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to make a floating div disappear for smaller screens?
提问by jlstr
This is a pure html/css Question, here it goes.. I have a floating div to the right of my page layout, I need it to disappear if my screen size is too small (or if resize the browser window to a smaller setting). Let's say it's something as simple as this:
这是一个纯粹的 html/css 问题，它在这里......我的页面布局右侧有一个浮动 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>
let's say it has this simple CSS too:
假设它也有这个简单的 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;
}
As of now, if I reduce window size, the div with idof right-div starts to overlap with the "main" div. I need to know how to make it disappear or hideif the screen size is small (or getting smaller).
到目前为止，如果我减小窗口大小，id为 right-div 的 div 开始与“main” div重叠。如果屏幕尺寸小（或变小），我需要知道如何让它消失或隐藏。
How can I accomplish this? Thank you all in advance for your help,
我怎样才能做到这一点？提前感谢大家的帮助，
J.
J。
采纳答案by Webars
Here is a solution if you have a fixed width layout. http://jsfiddle.net/uMVMG/
如果您有固定宽度的布局，这是一个解决方案。http://jsfiddle.net/uMVMG/
<div id="container">
<div class="inner">
<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>
</div><!-- .inner end -->
</div><!-- #container end -->
#container {
overflow: hidden;
max-width: 500px;
min-width: 300px;
}
#container .inner {
width: 500px;
}
#right-div {
float: right;
width: 200px;
background: green;
}
#main {
width: 300px;
height: 200px;
background: red;
}
回答by Madara's Ghost
Use Media Queries. Example:
使用媒体查询。例子：
@media all and (max-width: 300px) {
.floated_div { display: none; }
}
jsFiddle Example. Resize the output area until it is smaller then 300px to see the effect.
jsFiddle 示例。调整输出区域的大小，直到它小于 300px 以查看效果。
See thisanswer for IE compatibility.
请参阅此答案以了解 IE 兼容性。
