每当我尝试在内容中的主页正文中放置额外的文本时,它都会扭曲并基本上向下推倒我在侧面设置的侧边栏和广告框。这是一个课堂项目,我已经向老师寻求帮助,但她说代码基本上是好的,她不明白为什么要这样做。这是我的主页和 css 样式表的代码
.HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="dio.css">
<link href='https://fonts.googleapis.com/css? family=Exo:400,700italic' rel='stylesheet' type='text/css'>
<script src="dio.js"></script>
<style>
#sidebar {
background: olive;
width: 20%;
height: 1000px;
float: left;
}
#advertising {
background: olive;
width: 20%;
height: 1000px;
float: right;
}
#footer {
height: 50px;
width: 1280px;
background: black;
text-align: center;
clear: both;
}
</style>
</head>
<body>
<header>
`
<div id="header" id="png">
<h1>DIO INC</h1></div>
<h3>Today is <span id = "dtField"></span>
</h3>
</header>
<div id="sidebar">
<h2>DIO WEBSITE</h2>
<nav>
<details>
<summary>Page Content</summary>
<ul>
<li>
<p>Please click <a href="dioPage2.html">About Us</a> to view our inoformation</p>
</li>
<li>
<p>Please click <a href="dioPage3.html">Services and Pricing</a> to view our services</p>
</li>
<li>
<p>Please click <a href="dioPage4.html">Contact Information</a> to view our contact information</p>
</li>
</ul>
</details>
<nav>
</div>
<div id="content">
</div>
<div id="advertising">
<p>Please click
<a href="http://www.ebay.com/sch/bananaman917_5/m.html?_nkw=&_armrs=1&_ipg=&_from="><img src="http://mssparky.com/wp-content/uploads/2010/11/ebay_logo.jpg" title=DIO width="150"></a> to view items for sale.</p>
</div>
<div id="footer"><strong>Copyright © 2016</strong></div>
<script type="text/javascript">
window.onload = initDate;
function initDate() {
var dayName = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
var monName = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
var now = new Date();
var dtString = dayName[now.getDay()] + ", " + monName[now.getMonth()] + " " + now.getDate();
document.getElementById("dtField").innerHTML = dtString;
}
</script>
</body>
</html>
这是 CSS:
h1 {
color:#ADFF2F;
text-align: center;
font-weight: bold;
}
h2 {
color:#ADFF2F;
text-align: lcenter;
font-weight: bold;
}
p, strong, summary, section, h3 {
color:#ADFF2F;
font-weight: bold;
}
a {
font-weight:bold;
text-decoration:none;
}
a, h1, h2, p, strong, summary, section, h3 {
font-family: 'Exo', sans-serif;
}
a:link {
color:#FF69B4;
}
a:active {
color:#e03a3e;
}
a:hover {
color:#e03a3e;
}
header {
height:100px;
width:1280px;
background:black;
text-align: center;
font-weight: bolder;
}
html {
background:url('trees.jpg') #98FB98 no-repeat;
background-size:cover;
}
body {
width:1280px;
height:1100px00px;
background:rgba(0,0,0,0.4);
}
content {
float:left;
height:1000px;
}
table {
width:1280px;
Height:1000px;
}
table, th, td {
border: 1px solid black;
padding:5px;
border-collapse:collapse;
color:#00FF00;
font-weight: bold;
}
thead {
background: #3056A0;
color: white;
font-weight: bold;
}
table > caption {
font-weight: bold;
}
tfoot {
font-size: 0.75em;
text-align:right;
font-weight: bold;
}
tbody tr:nth-child(even) {
background: #808000;
font-weight: bold;
}
tbody tr {
background: #808000
font-weight: bold;
}
footer {
height:50px;
width:1280px;
background:black;
text-align:center;
clear:both;
}
缺少 CSS 中content
的#
,也像这样为内容添加宽度:
#content {
float: left;
height: 1000px;
width: 60%;
}
例如,请参阅小提琴:https://jsfiddle.net/op2vbsww/1/
很简单。您的#content
#sidebar
和#advertising
都是浮动left
,并且都需要设置谨慎的宽度以确保它们适合您的容器(您的body
充当包含宽度)。
您在#sidebar
和#advertising
上设置了宽度,但没有设置#content
。因此,请添加宽度规则。
#content {
float:left;
box-sizing:border-box; <---
display:inline-block; <--
width:60%; <--
height:1000px;
}
从本质上讲,您的内容水平扩展超过60%,并迫使块流中的下一个元素(#advertising
)在您的#content
下;您已经超过了100%的可用空间。
其他几件事:
-
box-sizing:border-box
也是关于结构元素的好主意 - 不要在正文上设置
width
。 使用包装元素包含特定大小的内容。 - 找一位新老师。抱歉,但这些都是新手错误,您的"老师"应该能够轻松看到它们。