Question

我一直在使用表格制作页面。最近我一直试图改用div，因为每个人似乎都这样做了，而且一直很痛苦。无论如何，我在想是否有人能够帮助我解决这个问题。我附上了一张可以解释问题的图片，因为毕竟一张图片胜过千言万语。提前谢谢。

[图片已删除]

Answer 1

你是说这样的意思吗？

<强> HTML：

<div id="content"><br/></div>
<div id="navigation"><div><br/></div></div>

<强>的CSS：

html,body{
    height:100%;
    margin:0;  
    padding:0;
}
#content{
    width:800px;
    border:1px solid red;
    min-height:100%;
    margin:0 auto;
    position:relative;
}
#navigation{
    position:absolute;
    top:0;
    width:100%;
    height:100px;
    background:gray;
}
#navigation div{
    width:800px;
    height:100%;
    background:lightgray;
    position:relative;
    margin:0 auto; 
}

<强>演示：
http://jsfiddle.net/Z8UDf/

Answer 2

以div为中心使用CSS边距：

<div style="width: 800px; margin: 0 auto"></div>

在该div中，您可以放置导航栏，这将填满可用空间。

关于主要内容两侧的空格，您有两种选择。

您可以在background-image处在正文上设置top repeat-x，这样您的网页上就会出现一条水平条。
您可以从主体拆分导航，使用上述方法使两者都居中。用另一个100％宽度的div包裹顶部'navigation'div。然后，您可以根据需要设置该div的样式。这样做的好处是可以在不更新背景图像的情况下移动它。

Answer 3

使用css样式

<div style="position:absolute;left:100px;top:150px;" > MyDiv1 </div>
<div style="position:absolute;left:130px;top:150px;" > MyDiv2 </div>

一个div而不是另一个

3 个答案: