0

我确信对此有一个非常简单的解释，但我似乎无法弄清楚，希望能得到一些帮助。

尽管所有数字似乎加起来，并且基本上没有任何填充或边距，但我的主要部分（由#main 和#rightnav 组成）比我的标题更宽。

我错过了什么？

<head>

<style type="text/css">
body {
background: url('cwbg.jpg');
text-align: center;
border: 0;
padding: 0;
margin: 0;
}
a {
border: 0;
text-decoration: none;
}
img {
vertical-align: top;
}
#container {
width: 800px;
height: auto;
margin: auto;
}
#header {
width: 800px;
height: 100px;
margin: auto;
padding-top: 50px;
}
#main {
width: 650px;
height: 700px;
float: left;
}
#rightnav {
width: 150px;
height: 700px;
float: left;
padding-top: 7px;
}
#rightnav ul {
list-style-type: none;
padding: 0;
margin: 0;
}
#rightnav img {
float: left;
}
</style>
</head>

<body>
<div id="container">
<div id="header">
    <img src="header.png" alt="Christopher James Wilson">
</div>
<div id="main">
</div>
<div id="rightnav">
    <ul>
        <li><img src="navslices/images/menu_01.png" /></li>
        <li><img src="navslices/images/menu_02.png" /></li>
        <li><img src="navslices/images/menu_03.png" /></li>
        <li><img src="navslices/images/menu_04.png" /></li>
        <li><img src="navslices/images/menu_05.png" /></li>
        <li><img src="navslices/images/menu_06.png" /></li>
        <li><img src="navslices/images/menu_07.png" /></li>
        <li><img src="navslices/images/menu_08.png" /></li>
        <li><img src="navslices/images/menu_09.png" /></li>
        <li><img src="navslices/images/menu_10.png" /></li>
        <li><img src="navslices/images/menu_11.png" /></li>
        <li><img src="navslices/images/menu_12.png" /></li>
        <li><img src="navslices/images/menu_13.png" /></li>
        <li><img src="navslices/images/menu_14.png" /></li>
        <li><img src="navslices/images/menu_15.png" /></li>
        <li><img src="navslices/images/menu_16.png"></li>
    </ul>
</div>
</div>
</body>
4

2 回答 2

1

您可能想尝试相对定位元素。如果您的图片比您设置的尺寸宽，它们可能会推出区域。

另一种选择是将所有元素包装在一个 div 中。

于 2012-06-20T15:53:04.800 回答
0 
<html>
<head>
<style type="text/css">

#container{
width: 800px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}

#header{
background: #EAEAEA;
height: 100px; /*Height of top section*/
}

#topsection h1{
margin: 0;
padding-top: 15px;
}

#contentwrapper{
float: left;
width: 100%;
}

#rightnav{
margin-left: 650px; /*Set left margin to LeftColumnWidth*/
height:700px;
}

#main{
float: left;
width: 650px; /*Width of left column*/
margin-left: -800px; /*Set left margin to -(MainContainerWidth)*/
background: #C8FC98;
height:700px;
}

</style>
</head>
<body>
<div id="container">

<div id="header"><h1>Header</h1></div>

<div id="contentwrapper">
<div id="rightnav">
<b>Content Column:
</div>
</div>

<div id="main">
  Left Column
</div>


</div>
</body>
</html>

从 DynamicDrive 代码编辑以满足您的要求。

更多布局请参考http://www.dynamicdrive.com/style/layouts/

问题如上所述，您的 div 容器缺少一些位置属性。

于 2012-06-20T16:51:32.113 回答