当我制作我的网站时,我用 div 标签而不是表格来制作它,这是大多数人所做的,然后我用 margin 属性定位它们,我尝试过使用 position:absolute 和 relative 属性,但是当我重新 -调整我的浏览器大小,一切都会改变,就像这样 -
我希望它留在原地,就像大多数使用 div 标签的网站一样,当您调整它们的大小时它们不会移动,我想知道它们使用了什么技巧...
顺便说一句,我的网站仍在 build 中,哈哈...谢谢
我的代码
<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>
最佳答案
div
s 是 block 元素,这意味着它们会自动扩展以填充其包含元素的宽度。如果您不希望它们随着浏览器窗口展开,您应该考虑将它们包装在一个包含 div
的容器中。具有显式宽度,或为每个 div
设置显式宽度.
这是我根据您的模型做出的最佳猜测;例如,如果您在 jsfiddle 上发布一些代码,您可能会得到更具体的答案:)
[更新]
我已经稍微清理了您的代码。我不认为所有 div
s 具有匹配的开始和结束标签,但很难分辨。
我已经从内联样式中删除了您的 CSS。有很多重复,除了使代码难以阅读之外,还意味着更改不一定会显示出来,因为它们在其他声明中被覆盖了。
我的修改版本中的关键是 <div id="wrapper">
.您会在相应的样式中看到 #wrapper
设置为 500 像素宽并水平居中。
这是 jsfiddle与我的更新。
关于css - 网站溢出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6471615/