1

我刚刚创建了一个使用多个 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;
}
4

4 回答 4

1

您粘贴的代码很好，问题一定出在您忽略分享的其他地方。您看到的问题可能是使用浮动、文本对齐：右以及内联和块元素的混合。花点时间了解它们如何协同工作以实现更一致和更轻松的 HTML 开发。

于 2013-07-02T12:01:04.797 回答
1

利用

overflow: auto;

在你需要它的 CSS 类中， 或者你也可以使用

div {
    border: 1px solid black;
    width: 70px;
    overflow: hidden;
    white-space: nowrap;
}
于 2013-07-02T12:01:31.210 回答
0

他们称之为响应式设计的东西可能会对您有所帮助；）

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

解决方案是这样做的：

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

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

并使用@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 像素的任何屏幕设置大小，因此您的最大版本的代码将放在这里}

所以这意味着你将有 6 倍的 CSS 代码适应大小。

这称为自适应或响应式设计，很容易做到

有关更多信息，您可以查看此http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

如果有 div 让您的设计或网页在侧面溢出，您可能会添加溢出：隐藏到 CSS 中的那些 div 的一个小提示，这应该可以解决该问题。

于 2014-04-16T07:52:46.187 回答
0

我遇到了同样的问题，我使用的是像素。有人说我们应该使用em而不是px. 但那时我不可能将所有像素都更改为 em。

我设法div通过使容器的大小div增加一点来防止 s 继续缩小，以便它可以适应在缩放时重新调整内容大小时发生的微小变化。希望这可以帮助

于 2015-05-15T06:16:59.947 回答