Div 在 Window 尺寸改变时重叠

Question

试图让我的 div 在我改变 window 的大小时不移动。

这是有问题的CSS

#Main {
  font-family: Arial;
}

#Intro{
  width: 70%;
  height: 1000px;
  background: rgba(255, 250, 250, 0.5);
  border-radius: 10px 10px 10px 10px;
  -moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px;
  border: 0px solid #000000;
  -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
  box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
  padding-top: 20px;
 position: relative;
}

nav {
  width: 15%
  position: fixed;
  float: left;
  background: rgba(255, 250, 250, 0.5);
  border-radius: 10px 10px 10px 10px;
  -moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px;
  border: 0px solid #000000;
  -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
  box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}

twitter {
  width: 15%;
  float: right;
  background: rgba(255, 250, 250, 0.5);
  border-radius: 10px 10px 10px 10px;
 -moz-border-radius: 10px 10px 10px 10px;
 -webkit-border-radius: 10px 10px 10px 10px;
  border: 0px solid #000000;
  -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
  box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}

基本上，我的 Main Div 中有三个 Div，当屏幕尺寸改变或分辨率变小时它们会重叠。我确定我做错了一些愚蠢的事情，但我们就是这样。

Answer 1

如果我对您的问题的理解正确，那么您不希望在更改 window 屏幕时调整 div 的大小。我建议你改变你的：
width: x%;
至：
width: xpx;
或者，如果您希望在呈现页面后解决此问题，那么您可能需要使用 min-width 属性，这可能能够解决您的问题。
min-width: xpx;
或
min-width: x%;

Answer 2

你能展示一下你正在使用的 HTML 吗？可能是您遗漏了 meta viewport tag。如果您不想改变宽度，另一种解决方案可能是使用像素值而不是百分比（如 Juan Carlos 所建议的那样）：

#Main {
    width: 800px;
}

作为旁注，我建议您查看 caniuse.com 中的前缀。 box-shadow and border-radius

不需要所有这些前缀

Answer 3

这是代码的其余部分

索引：

<?php
echo "<center>";
echo "<div id='Main'>";
            include("banner.php");
    include("navbar.php");
    include("twitter.php");
    include("intro.php");
    include("footer.php");
echo "</div>";
echo"</center>";

?>

导航栏

<?php
echo "<nav>
<table>
<tr>
<td>
        <ul>     
            <li><a href= 'index.php' class='LinkHome'/></a></li>       
            <li><a href= 'products.php' class='LinkProduct'/></a></li>
            <li><a href= 'fitch.php' class='LinkFitch'/></a></li>
            <li><a href= 'argodealers.php' class='LinkArgo'/></a></li>
            <li><a href= 'about.php' class='LinkAbout'/></a></li>
            <li><a href= 'contact.php' class='LinkContact'/></a></li>
        </ul>
</td>
</tr>


</table>

</nav>";
?>

推特

<?php
echo "
  <twitter>             
    Twitter Stuff would go here
  </twitter>";
?>

乱七八糟的，我知道

此外，我从 Div 中取出了两个，看看会发生什么[适当编辑 CSS] - 这种方法效果更好

Answer 4

如果我理解正确的话，你想要的是列布局？

<center>
  <div id="Main">
    <nav id="nav">Navigation goes here</nav>
    <div id="twitter">Twitter goes here</div>
  </div>
</center>

#main {
  width: 100%;
}

#nav,
#twitter {
  float: left;
  color: #fff;
}

#nav {
  width: 30%;
  background: blue;
}

#twitter {
  width: 70%;
  background: green;
}

此示例创建了一个两栏布局，导航在左侧，"Twitter" 在右侧。如果您想拥有另一列，则必须将其作为子项添加到#main 并更改列的宽度。（#nav、#twitter 和你的第三个）

如果您想更改尺寸或较小屏幕的顺序，您必须使用 media queries。您可以执行以下操作：

@media screen and (max-width: 600px) {
    #nav,
    #twitter {
        float: none;
        width: 100%;
    }
}

我在您的 HTML 中看到的另一件事是您试图用作元素。这将是一个自定义 HTML 元素，它不会在所有浏览器中工作，尤其是在旧浏览器中（没有像 Polymer). You can read more about Custom HTML elements in this article on html5rocks: Custom elements. To keep things simple you should stick to the available HTML5 elements.

这样的 polyfill/library

Div 在 Window 尺寸改变时重叠

Div overlapping when Window size changes

css

scale