我试图弄清楚如何在页面上拉伸包含三列布局的 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>
将其添加到CSS代码中
body{
overflow-x: hidden;
height: 100%;
width: 100%;
}
在 CSS 中替换它
*{
margin:0px;
padding:0px;
margin-left:0px;
padding-left:0px;
padding-top:0px;
left:0px;
}