html – 根据浏览器窗口大小使div增长和缩小_html-js-css

概述我正在创建一个非常简单的html页面,并想知道如何为我的页面执行以下两项 *** 作： >我有一个容器div,并希望将容器div放在页面的中心. >当我调整窗口大小时,容器div将增长和缩小. 我写了附加的代码,但容器总是粘在左边,当我调整窗口大小时它不会改变大小. <title>Demo</title><head>This is a demo</head><style>#nav{backgro 我正在创建一个非常简单的HTML页面,并想知道如何为我的页面执行以下两项 *** 作：

>我有一个容器div,并希望将容器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 >        <image  src="test1.jpg" wIDth="50px" height="50px"/>        <image  src="test2.jpg" wIDth="50px" height="50px"/>        <image  src="test3.jpg" wIDth="50px" height="50px"/>        <image  src="test4.jpg" wIDth="50px" height="50px"/>        <h3>Title</h3>        <p>Testing</p>    </div>    <hr></div></div><body>

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

谢谢.

解决方法

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

总结

以上是内存溢出为你收集整理的html – 根据浏览器窗口大小使div增长和缩小全部内容，希望文章能够帮你解决html – 根据浏览器窗口大小使div增长和缩小所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1132700.html

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

发表评论

评论列表（0条）