窗口大小改变时分割重叠

Question

当我更改窗口大小时，试图让我的div不移动。

这是有问题的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);
}

基本上，我的主分区中有三个分区，当屏幕大小变化或分辨率变小时，它们会重叠。我确信我做错了一些愚蠢的事情，但我们来了。

Answer 1

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

<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 screen and (max-width: 600px) {
    #nav,
    #twitter {
        float: none;
        width: 100%;
    }
}

我在HTML中看到的另一件事是，您试图将其用作元素。这将是一个自定义HTML元素，它不会在每个浏览器中都工作，尤其是在旧的浏览器中(没有像Polymer这样的polyfill/库(。您可以在这篇关于html5rocks:Custom元素的文章中阅读更多关于Custom HTML元素的内容。为了保持简单，您应该坚持使用可用的HTML5元素。

Answer 2

如果我正确理解您的问题，那么您不希望在更改窗口屏幕时调整div的大小。我建议您更改您的：
width: x%;
收件人：
width: xpx;
或者，如果你想在页面呈现后解决这个问题，那么你可能想使用最小宽度属性，这可能会解决你的问题
min-width: xpx;
或
min-width: x%;

Answer 3

您能显示您正在使用的HTML吗？可能是您缺少元视口标记。另一种解决方案可能是使用像素值而不是百分比(正如Juan Carlos建议的那样(，如果你不想改变宽度：

#Main {
    width: 800px;
}

顺便说一句，我建议你看看caniuse.com上的前缀。框阴影和边界半径不需要所有这些前缀

Answer 4

以下是代码的其余部分

索引：

<?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>";
?>

Twitter

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

Messy，我知道

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