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

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

html css

Html 使div根据浏览器窗口大小增长和收缩,html,css,Html,Css,我正在制作一个非常简单的html页面，我想知道如何为我的页面做以下两件事：我有一个container div，希望将container div放在页面的中心当我调整窗口大小时，容器div将增长和收缩我写了附加的代码，但容器总是粘在左边，当我调整窗口大小时，它不会改变大小 <title>Demo</title> <head>This is a demo</head> <style> #nav { background-color:

我正在制作一个非常简单的html页面，我想知道如何为我的页面做以下两件事：

我有一个container div，希望将container div放在页面的中心

当我调整窗口大小时，容器div将增长和收缩

我写了附加的代码，但容器总是粘在左边，当我调整窗口大小时，它不会改变大小

<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>

Demo
这是一个演示
#导航
{
背景色：红色；
浮动：左；
宽度：200px；
位置：相对位置；
}
#细部
{
背景颜色：绿色；
浮动：对；
宽度：800px；
位置：相对位置；
}
div.testDetail
{
边缘顶部：10px；
左边距：20px；
右边距：20px；
边缘底部：10px；
}
#容器
{
宽度：1000px；
位置：相对位置；
}

测试
标题
测试

我错过什么了吗？任何帮助都将不胜感激

谢谢。

使对象居中的最佳方法，尤其是

，是使用以下CSS：

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

如果没有固定的边距，对象将居中

调整尺寸时，使尺寸与页面相对（例如40%），而不是绝对尺寸（例如400px）。

马特CSS进行水平居中的一种简写方法是

margin: 0 auto;

0将指示上下页边距，而自动调整将指示左右页边距。如果您希望在顶部/底部留有边距，您可以将0更改为您想要的任何值（即

边距：20px自动；

使用%size，而不是PX size，即

宽度：80%；

或者，更好的是，不要浮动它。我可以为

执行此操作吗？

#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%;
}

margin: 0 auto;