Question

我正在试图弄清楚如何在页面上拉伸包含三列布局的div的边框。它正确向右延伸，但在左侧不正确。任何人都可以向我发一些指示吗？

作为一个附带问题，这就是为什么我的内容容器div中的第三列不可编辑？由于某些原因，我似乎无法更改此布局的第三列的格式，我认为它与第一个问题有关。

我检查了宽度标签，似乎设置为自动。

<body>
<div id="wrapper">
<div id="logo">
<p align="left"><img src="assets/virael-logo.jpg" alt="logo"/></p>
</div>
<div id="menu">
<ul><p align="right">
<li><a class="button" href="..//FinalProject/playerprofiles.html">Media</a></li>
<li><a class="button" href="..//FinalProject/Tourneyschedule.html">Resources</a></li>      
<li><a class="button" href="..//FinalProject/Tourneyschedule.html">Blog</a></li>
</p>
</div>
</ul>
<p>
</p>
<div id="content-container">
<div id="section-navigation">
<ul>
<li><a href="#">Chapter 1</a></li>
<li><a href="#">Chapter 2</a></li>
<li><a href="#">Chapter 3</a></li>
<li><a href="#">Chapter 4</a></li>
</ul>
</div>
<div id="content">
<h2>
Introduction to New Media
</h2>
<p>
Lorem ipsum dolor sit amet consect ...
</p>
<p>
Ut wisi enim ad minim veniam, ...
</p>
<p>
Duis autem vel ... 
</p>
</div>
<div id="aside">
<h3>
Glossary
</h3>
<p>
Critical Theory, Continental Philosophy, Horkheimer,
</p>
</div>
</div>

<!--This is the Footer-->
<!--This is the end tag for wrapper div--></div></div>
</body>

</html>

和CSS表

@charset "utf-8";
/* CSS Document */
<style type="text/css">
}
* {
margin: 0;
}
html, body {
margin:0;
padding:0;
height:100%;
width: auto;
}

#header {
padding:10px;
background:#5ee;
}

#content-container
{
clear: left;
width: 1024px;
background: white; 
}

#section-navigation
{
float: left;
width: 0;
padding: 40px 0px;
margin: 20px 0px;
display: inline;
}

#section-navigation ul
{
margin: 0px;
}
#section-navigation ul li
{
margin: 0px 0px 0px;
padding: 0px;
list-style-type: none;
}
#content {
font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', Arial,     sans-serif;
margin: 0 0 0 85px;
display:inline-block;
padding-top: 30px;
padding-bottom: 30px;   /* Height of the footer element */
padding-left: 165px;
padding-right: 430px;
position: absolute;
top: 100px;
text-align: justify;
width: auto;
border-top: 7px solid black;
border-left: none;
border-right: none;
border-bottom: 7px solid black;
overflow: auto;
}

#content h2 { margin: 0;
font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro,'Myriad Pro', Arial, sans-serif;  }

#aside
{
font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', Arial, sans-serif;   
float: right;
width: 50px;
padding: 50px 0;
margin: 0 20px 0 0;
display: inline;
}

#aside h3 { margin: 0; }

#logo{
background-repeat: no-repeat;
background-position: right top;
margin-left: auto;
margin-right: auto;
float: left;
margin: 0px 30px 0px 25px;
overflow: hidden;

}

#logo2{
visibility: hidden;
margin: 0px 30px 0px 25px;
float: left;

}

#menu {
margin-left: auto;
margin-right: auto;
float: both; 
overflow: hidden;

}

ul {
float: left;
list-style-type:none;
text-align:center;
margin: 0;
padding: 0;
}

li {
display: inline-block;
text-align: center;
}

a:link, a:visited {
font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro,'Myriad Pro', Arial, sans-serif;
display: block;
font-size: 18pt;
font-weight: bold;
width: 256px;
color: black;
background-color: white;
text-align: center;
padding: 16px;
text-decoration: none;
text-transform: capitalize;
}

a:hover, a:active {
color: purple;
}

.content {
width:960px;
background: #F0F0F0;
border: 1px solid #CCC;
height: auto;
margin: 70px auto;
overflow: scroll;
}

#footer {
margin-left: auto;
margin-right: auto;
float: both;
}

#footer_menu {
margin-left: auto;
margin-right: auto;
float: left; 
overflow: hidden;

.wrapper {
min-height: 100%;
height: auto;
height: 100%;
margin: 0 auto -345px;
}

.footer, .push {
height: 345px;
}

#footer {
text-align: center;
text-transform: capitalize;
background: black;
line-height: 100px;
color: #FFFFFF;
} 

</style>
</head>
<body>

Answer 1

在CSS

中替换它

*{
margin:0px;
padding:0px;
margin-left:0px;
padding-left:0px;
padding-top:0px;
left:0px;
}

为什么我在页面左侧的徽标下方有额外的空白区域？

1 个答案: