Question

我刚刚创建了一个使用多个div的网站。我然后放大和缩小，特别是DIV移动到左角，而其他人移动到屏幕的右角。
以下是我的网站的代码，如果有人可以帮助我，将非常感谢。由于受到影响，我在标题之后遗漏了大部分正文，但是认为这个错误与DIV之一有关，例如“容器”div，而不是每个特定DIV中的详细信息。 / p>

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

Answer 1

您粘贴的代码很好，问题必须在您忽略的其他地方分享。您看到的问题可能是使用浮点数，text-align：right以及内联和块元素的混合。花点时间了解每种方法如何协同工作，以实现更加一致和简单的HTML开发。

Answer 2

使用

overflow: auto;

在你需要的css类中 OR 您也可以使用

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

Answer 3

他们称之为响应式设计可能会帮助你;）

它会因为每个屏幕上的屏幕宽度不同而发生变化+如果缩小浏览器窗口，它也会改变或放大。

解决方案是这样做的：

你可以通过在你的CSS中使用@media查询和一个视口来解决这个问题，并将这个元标记添加到你的html：

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

使用@media查询和视口，您可以使用css中的媒体查询+视口声明每个屏幕宽度的大小：

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

//宽度为820到920像素的屏幕的css到这里

我主要使用的值是：从20 - 600,600-700,700-820,820 - 920,920 - 1200，@ media screen和（min-width：1200px）{@ viewport {width：1200px; }（最后一个将设置任何大于1200像素宽度的屏幕的大小，所以你的代码最大的版本在这里进行}

因此，这意味着您的css代码将被调整为适应大小的6倍。

这称为自适应或响应式设计，非常容易实现

有关详细信息，请查看此http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

如果有一个小小的提示让你的设计或网页流过一边你可能会添加溢出：隐藏到css中的那些div这应该解决这个问题。

Answer 4

我遇到了同样的问题而我正在使用像素。有人说我们应该使用If ProductInformation.Rows(0)("MonthlyPrice") IsNot DBNull.Value Then Me.txtMonthlyPrice.Text = String.Format("{0:0.##}", ProductInformation.Rows(0)("MonthlyPrice")) Else Me.txtMonthlyPrice.Text = "" End If代替em。但是在那时我不可能将所有像素都改为ems。

我设法通过使容器px的大小稍微增加来防止div继续缩小，以便它可以容纳在缩放内容时重新调整内容的小变化。希望这有帮助

放大和缩小时DIV的移动

4 个答案: