如何在整个页面缩小时缩小整个页面？

-1

如果页面缩小，我如何缩小网页及其所有内容到中心？这是缩小之前。这是缩小如何在整个页面缩小时缩小整个页面？

如何收缩到页面的中心，而缩小后？使用

代码IM是

<title>Demo</title> 
<head>This is a demo</head> 
<style> 
#my-div{ 

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

    width: 80%; 
    height: 50%; 
} 
#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 style="background-color:blue";> 


<div id="my-div"> 
<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> 
    </div> 
    <hr> 
</div> 
</div> 
<body>

来源

2016-05-04 Ramya Selvaraj

请提供示例代码。您可以添加'margin：auto'来确保内容居中。 – phpheini

提供了代码示例，以及迄今为止您尝试过的内容。 – LorDex

是的，我已经共享该示例代码 –

也许你可以共享代码的例子吗？

您可以尝试使用CSS属性：

margin:0 auto;为中心的功能块（在你的情况可能是身体）。

问候。

[编辑]

首先，你必须在你的HTML错误：

结尾标记正确
删除 ';'在开放body标签
包装代码
添加head标签内的doctype（HTML5在我的代码中使用）
放式机头标签内
放标题
删除文本节点

请缩进。

[编辑]

下面的代码工作的更正后，我用百分比来代替像素大小，可享受：

<!doctype html> 
<html lang="en"> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Demo</title> 
     <style> 
      body{ 
       margin: 0 auto; 
       width: 100%; 
      } 

      #my-div{ 
       margin: 0 auto; 
       width: 80%; 
       height: 50%; 
      } 

      #nav 
      { 
       background-color: red; 
       float: left; 
       width: 20%; 
       position:relative; 

      } 

      #detail 
      { 
       background-color: green; 
       float : right; 
       width: 80% 
       position:relative; 
      } 

      div.testDetail 
      { 
       margin-top:10px; 
       margin-left:20px; 
       margin-right:20px; 
       margin-bottom:10px; 
      } 

      #container 
      { 
       width:auto; 
       position:relative; 
      } 
     </style> 
    </head> 
    <body style="background-color:blue"> 
     <div id="my-div"> 
      <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> 
       </div> 
       <hr> 
      </div> 
     </div> 
    </body> 
</html>

来源

2016-05-04 12:48:17

是的，我已经分享了该代码 –

你应该在CSS

来源

2016-05-04 12:53:05

这里使用引导程序框架是您的解决方案： https://jsfiddle.net/xkzomtvd/2/

将整个页面保留在主div中并应用该类 fo R实施例：

这里的所有内容

给予风格这一类：

.wrapper {

margin:0 auto; 
max-width:400px; /* required width fixed or percentage */ 
background:red;

}

来源

2016-05-04 12:55:23

你实际上是居中的页面，它只是并不明显马上。原因是＃my-div元素的宽度为80％，而他们的所有子级都在1000px容器内。

这将解决你的问题：

#my-div{ 
    width: 1000px; 
}

你可以使用max-width交替，但对于你的榜样，是不是真的有一个理由。

来源

2016-05-04 12:58:12 TheThirdMan

如何在整个页面缩小时缩小整个页面？

回答

相关问题