DIV移動時放大和縮小

我剛剛創建了一個使用多個div的網站。然後我放大和縮小，特定的DIV移動到左邊的角落，而其他的移動到屏幕的右邊角落。
下面是我的網站代碼，如果有人可以幫助我，將不勝感激。我在標題後面留下了大部分內容，因爲它受到了影響，但是認爲這個錯誤與DIV的其中一個例如「容器」div有關，而不是每個特定DIV中的細節。DIV移動時放大和縮小

HTML：

<html> 
<head> 
    <title> Test Website</title> 
    <link rel="stylesheet" type="text/css" href="index.css"> 
</head> 

<body> 
    <div id="container"> 

     <div id="top_section"> 
      <div id="logo"> 
       <img src="images/pbc_WHITE_bg.tif" width="180px" height="168px"> 
      </div> 
     </div> 

     <div id="navigation"> 
      <ul id="nav_menu"> 
      <li><a href="#">HOME </a></li> 
      <li><a href="#"> NEWS</a></li> 
      <li><a href="#"> MEDIA </a></li> 
      <li><a href="#"> CONTACT</a></li> 
      </ul> 
     </div> 
    </div>

CSS：

{ 
    position: relative; 
    margin: 0; 
    padding: 0; 
    font-weight: lighter; 
} 

body { 
    padding: 0px; 
} 

p { 

color: grey; 
font-family: "brandon-grotesque",sans-serif; 
font-size: 13px; 
    } 

h1 { 

color: black; 
font-weight: lighter; 
font-size: 14px; 
font-family: "brandon-grotesque",sans-serif; 
    } 

    a { 

font-size: 14px; 
color: grey; 
font-family: "brandon-grotesque",sans-serif; 
    } 

    #container { 
margin: 0px auto; 
/*background: pink;*/ 
width: 100%; 
height: 169px; 
border-bottom: 1px solid #F2F2F2; 
    } 

    #top_section { 

width: 400px; 
height: 170px; 
/*background: black;*/ 
float: left; 
    } 

    #logo { 
margin-left: 170px; 
    } 

    #navigation { 

position: relative; 
background: blue; 
margin-top: 70px; 
width: 700px; 
float: right; 
margin-right: 50px; 
} 

ul#nav_menu { 

list-style-type: none; 
    } 

    ul#nav_menu li { 

display: inline-block; 
padding-right: 5px; 
width: 150px; 
text-align: right; 
position: relative; 
float: left; 
} 

ul#nav_menu li a{ 

    text-decoration: none; 
    text-align: right; 
}

來源

2013-07-02 user2542424

是縮小您的網站的主要功能之一還是隻是爲了完美？ – Ron

請張貼jsFiddle。 – screenmutt

謝謝你的回覆，是的，它完全是爲了完美而乾杯 – user2542424

您粘貼的代碼是正確的，這個問題必須在其他地方，你忘了分享。你看到的問題可能是混合使用浮動，text-align：right，以及內嵌和塊元素的混合。花點時間瞭解每種方法如何協同工作，實現更加一致和簡單的HTML開發。

來源

2013-07-02 12:01:04 Ermir

是的，其餘的HTML代碼似乎太多分享，所以我決定不顯示它。謝謝回覆。 – user2542424

使用

overflow: auto;

在你的CSS需要它 OR類，你也可以使用

div { 
    border: 1px solid black; 
    width: 70px; 
    overflow: hidden; 
    white-space: nowrap; 
}

來源

2013-07-02 12:01:31

非常感謝，將嘗試它並回復你:)乾杯 – user2542424

有他們稱之爲響應式設計它可以幫助你出去的東西;）

它的變化是因爲屏幕寬度在每個屏幕上都不相同+如果您縮小瀏覽器窗口也會更改或放大。

的解決方案是這樣做的：

您可以通過使用@media查詢的，並在你的CSS視口中解決這個問題，而這個元標記添加到您的HTML：

<meta name="viewport" content="width=device-width,initial-scale = 1.0,maximum-scale = 1.0」>

，並與@您可以聲明每個屏幕寬度有什麼大小使用該媒體查詢+視在CSS媒體查詢的和視：

@media screen and (min-width: 820px) and (max-width: 920px) { 
    @viewport { width: 820px; }

//你的CSS爲寬度g 820個920像素之間的屏幕OES這裏

我主要是使用的值的：從20 - 600，600-700，700-820，820 - 920，920 - 1200，@media屏幕和（最小寬度：1200像素）{@viewport {width：1200px; }（這最後一個將設置任何屏幕的大小超過1200像素的寬度，所以你的代碼爲最大的版本goeds這裏）

所以這意味着你將有6倍，你的CSS代碼是適應將適應尺寸。

這就是所謂的自適應或響應式設計，是很容易做到

欲瞭解更多的信息，如果有div的使您的設計或網頁流過上側的，你可能會檢查這個http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

一點小費你可能會添加overflow：隱藏在CSS中的div中，這應該解決這個問題。

來源

2014-04-16 07:52:46 Reynderke

我遇到了同樣的問題，我使用的是像素。有人說我們應該使用em而不是px。但在那時我不可能將所有像素都改爲ems。

我設法通過使容器div的尺寸稍微增加一些來避免div在縮小時移動，以便它可以適應在縮放時重新調整內容時發生的微小變化。希望這有幫助

來源

2015-05-15 06:16:59

DIV移動時放大和縮小

回答

相關問題