Question

当我创建我的网站时，我使用div标签而不是表格，这是大多数人所做的，然后我用margin属性定位它们，我尝试了它的位置：绝对和相对属性但是当我重新大小我的浏览器一切都改变了地方，像这样 - enter image description here

我希望它保持原位如果它像大多数使用div标签的网站一样，当你重新调整尺寸时它们不会移动，我想知道他们使用了什么技巧......

顺便说一下我的网站还在进行中大声笑...谢谢

我的代码

<html>
<head>
<title></title>
<link rel = "stylesheet" type = "text/css" href = "verdanacssstylesheet.css" />
<script type="text/javascript" src="external files/jquery.js"></script>
<!-----------START OF SCRIPT------------------------>
<script type = "text/javascript" >

</script>
<!------------END OF SCRIPT AND START OF STYLE-->
<style type = "text/css" >
div {border:2px solid black;}

</style>
<!---------------END OF STYLE AND HEAD AND START OF BODY---------->
</head>

<body style="margin:0px;padding:0px;" text="black" >
<div style="" >
<div id = "header" style="100%;height:150px;" >
<div id = "headerinside" style="margin-left:auto;margin-right:auto;width:1030px;height:150px;" ><div></div></div>
</div>
<div style="width:1030px;height:;margin-left:auto;margin-right:auto" >

<div style = "border:2px solid red;height:30px;" id = "navigationbar" >
<ul style = "list-style:none;" id = "navbar" >
<li style = "float:left;padding-left:45px;line-height:3px;" >hello</li>
<li style = "float:left;padding-left:120px;line-height:3px;" >hello</li>
<li style = "float:left;padding-left:120px;line-height:3px;" >hello</li>
<li style = "float:left;padding-left:120px;line-height:3px;" >hello</li>
<li style = "float:left;padding-left:120px;line-height:3px;" >hello</li>
<li style = "float:left;padding-left:120px;line-height:3px;" >hello</li>
</ul>
</div>

<div id = "main" style="">
<div style="width:1026px;text-align:center;" ><p>hello</p></div>
</div>
<div id = "footer" style="100%;height:150px;" >
<div id = "footerinside" style="margin-left:auto;margin-right:auto;width:1030px;;height:150px;" ><div></div></div>
</div>
</div>
</body>
<!---------------EDN OF BODY------------------->
</html>

Answer 1

div是块元素，这意味着它们会自动扩展以填充其包含元素的宽度。如果您不希望它们使用浏览器窗口进行扩展，则应考虑将它们包含在具有明确宽度的包含div中，或者为每个div设置显式宽度。

根据你的模特，这是我最好的猜测;例如，如果你在jsfiddle上发布一些代码，你可能会得到一个更具体的答案：）

<强> [更新]

我在某种程度上清理了你的代码。我不认为所有div都有匹配的开始和结束标记，但很难说。

我已从内联样式中删除了CSS。除了使代码难以阅读之外，还有很多重复，这也意味着更改不一定会出现，因为它们在其他声明中被覆盖。

我修改后的版本中的密钥是<div id="wrapper">。您将在相应的样式中看到#wrapper设置为500px宽并水平居中。

以下是我的更新jsfiddle。

Answer 2

试试这个代码伙伴，看看它是如何运作的。

<html>
<head>
<title>My Title</title>
<link rel= "stylesheet" type = "text/css" href = "style.css" />
<script type="text/javascript" src="files/jquery.js"></script>
<style type="text/css">
  #wrapper { margin: 0 auto; width: 960px; }
  .menu, .header, .footer, .content { float: left; width: 100%; }
  .menu ul{ float: left;}
  .menu li{ float: left; padding: 0 50px ;}

  .header{ background: #F1F1F1;}
  .content{ background: #E1E1E1;}
  .menu{ background: #D1D1D1;}
  .footer{ background: #C1C1C1;}
</style>
</head>

<body>
  <div id="wrapper">
     <div class="header">
       <h1>My Site</h1>
     </div>
     <div class="menu">
     <ul>
      <li><a href="">Menu 1</a></li>
      <li><a href="">Menu 2</a></li>
      <li><a href="">Menu 3</a></li>
      <li><a href="">Menu 4</a></li>
      <li><a href="">Menu 5</a></li>
      <li><a href="">Menu 6</a></li>
     </ul>
   </div>
   <div class="content">
      <p>My Content</p>
   </div>
   <div class="footer">
     <p>My footer</p>        
   </div>
</div>
</body>
</html>

这样可以避免使用“内联”样式，如果可以避免的话，这些样式有点不对。它允许您同时定位多个元素以应用样式。您可以看到上面的结构很漂亮，并且为您提供了一个960px宽的网站，它仍然位于用户屏幕的中心。应避免使用顶部的一种样式（边框：2px实心黑色;），因为最终会出现一堆2px和4px边框，其中2个div位于旁边，或者彼此叠加。

希望有所帮助。

Answer 3

确保您的网站保持在页面中心的标准结构将是这样的。

<div id="wrapper">
    <div class="header">
        <h1>My Site</h1>
    </div>
    <div class="content">
        <p>My Content</p>
    </div>
</div>

它为您提供了一个包装器以及页眉和页脚。实现这一目标的是：

#wrapper { margin: 0 auto; width: 960px; }
.header, .footer { float: left; }

每当用户调整窗口大小时，这将使页面与页面中心对齐。在你牢牢掌握css盒模型之前，绝对定位的使用应该是限制的（在我看来）。使用浮动很好，很容易生成最简单的布局。

网站溢出

3 个答案: