Question

我确信这有一个非常简单的解释，但我似乎无法弄清楚，会感谢一些帮助。

尽管所有数字似乎相加，并且基本上没有任何填充或边距，我的主要部分（由#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>

Answer 1

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

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

Answer 2

<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容器缺少一些位置属性。

CSS两列布局宽度（正文与标题）

2 个答案: