根据浏览器窗口大小使div增长和缩小

时间:2012-12-19 19:23:40

标签: html css

我正在创建一个非常简单的html页面,并且想知道如何为我的页面执行以下两项操作:

  1. 我有一个容器div,并希望将容器div放在页面的中心。
  2. 当我调整窗口大小时,容器div会增大和缩小。
  3. 我编写了附加代码,但容器始终贴在左侧,当我调整窗口大小时,它不会改变大小。

    <title>Demo</title>
    <head>This is a demo</head>
    <style>
    #nav
    {
    background-color: red;
    float: left;
    width: 200px;
    position:relative;
    
    }
    
    #detail
    {
    background-color: green;
    float : right;
    width: 800px;
    position:relative;
    }
    
    div.testDetail 
    {
    margin-top:10px;
    margin-left:20px;
    margin-right:20px;
    margin-bottom:10px;
    }
    
    #container
    {
    width:1000px;
    position:relative;
    }
    </style>
    
    <hr>
    <body>
    <div id="container">
    <div id="nav">
        <ul>Tests</ul>
    </div>
    <div id="detail">
        <div class="testDetail">
            <image style="float:right;margin:5px;" src="test1.jpg" width="50px" height="50px"/>
            <image style="float:right;margin:5px;" src="test2.jpg" width="50px" height="50px"/>
            <image style="float:right;margin:5px;" src="test3.jpg" width="50px" height="50px"/>
            <image style="float:right;margin:5px;" src="test4.jpg" width="50px" height="50px"/>
            <h3>Title</h3>
            <p>Testing</p>
        </div>
        <hr>
    </div>
    </div>
    <body>
    

    我在这里错过了什么吗?任何帮助将不胜感激!

    感谢。

3 个答案:

答案 0 :(得分:6)

<div id="my-div">
  ...content goes here
</div>

CSS

#my-div{
  //For center align
  margin: 0 auto;
  // For grow & shrink as per screen size change values as per your requirements
  width: 80%;
  height: 50%;
}

答案 1 :(得分:3)

Matt的CSS进行水平居中的简写方法是

margin: 0 auto;

0将指示顶部和底部边距以及自动左右边距。如果你想在顶部/底部有一个边距,你可以将0改为你想要的任何东西(即margin: 20px auto;

答案 2 :(得分:2)

使对象居中的最佳方法,尤其是<div>,是使用以下CSS:

margin-left: auto;
margin-right: auto;

没有固定的边距,对象将居中。

对于调整大小,使页面的大小相对(例如40%)而不是绝对大小(例如400px)。