如何在整個頁面縮小時縮小整個頁面？

-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

如何在整個頁面縮小時縮小整個頁面？

回答

相關問題