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

基本上，我的主要内容中有三个Div，当屏幕尺寸发生变化或分辨率较小时会重叠。我确定我做错了是愚蠢的，但我们在这里。

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 queries。你能做的是以下几点：

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

我在HTML中看到的另一件事是你试图用作元素。这将是一个自定义HTML元素，它不适用于每个浏览器，特别是在旧版浏览器中没有（没有像Polymer这样的polyfill /库）。您可以在html5rocks：Custom elements上阅读本文中有关自定义HTML元素的更多信息。为了简单起见，您应该坚持使用HTML5 elements。

Answer 2

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

Answer 3

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

#Main {
    width: 800px;
}

作为附注，我建议你看一下caniuse.com的前缀。您不需要box-shadow和border-radius

的所有前缀

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

微博

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

凌乱，我知道

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

窗口大小更改时Div重叠

4 个答案: