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移动时放大和缩小

回答

相关问题