logo标签列表

根据浏览器窗口大小调整div的大小

htmlcss
11

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

  1. 我有一个容器div，想把它放在页面的中心。
  2. 当我调整窗口大小时，容器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>

我在这里错过了什么吗？非常感谢任何帮助！

谢谢。

请使用％大小而不是PX大小，例如width:80％; - Darren Wainwright
或者更好的做法是不要将其浮动。 - Shmiddty
3个回答
11
<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%;
}
我可以对<header>这个标签做吗？ - Bhavik Joshi
3
马特的CSS中进行水平居中的一种简写方法是：
margin: 0 auto;

0代表上下边距，auto代表左右边距。如果想要设置上下边距，可以将0修改为任意值（例如：margin: 20px auto;）。

2

居中一个对象，特别是一个<div>元素，最好的方法是使用以下CSS：

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

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

对于调整大小，要相对于页面设置尺寸（例如40%），而不是绝对值（例如400像素）。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接