相关疑难解决方法(0)

7
推荐指数
1
解决办法
3499
查看次数

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

这是一个纯粹的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>
Run Code Online (Sandbox Code Playgroud)

让我们说它也有这个简单的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;
} …
Run Code Online (Sandbox Code Playgroud)

html css

5
推荐指数
2
解决办法
2万
查看次数

标签 统计

css ×1

download ×1

html ×1

jquery ×1

jquery-plugins ×1