Question

这是一个纯粹的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>

让我们说它也有这个简单的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;
}

截至目前，如果我缩小窗口大小，右侧div的 id 的div开始与“main” div 重叠。如果屏幕尺寸很小（或变小），我需要知道如何使其消失或隐藏。

我怎样才能做到这一点？提前感谢大家的帮助，

学家

Answer 1

使用媒体查询。例如：

@media all and (max-width: 300px) {
    .floated_div { display: none; }
}

<强> jsFiddle Example 即可。调整输出区域的大小，直到它小于300px以查看效果。

有关IE兼容性，请参阅 this 答案。

Answer 2

如果您有固定宽度的布局，这是一个解决方案。 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;
}

如何使浮动div消失为较小的屏幕？

2 个答案: