.floatright类不会向右浮动
您好我无法让我的windingroad.gif浮动到我的页面右侧，但我不知道我做错了什么。我尝试了一切但我必须遗漏一些东西。我真的很感激一些帮助。
＆＃13;
＆＃13;
＆＃13;
＆＃13;
body { background-color: #ffffcc;
background-image: url(background.gif);
color: #330000;
font-family: Verdana, Arial, sans-serif;
}
#wrapper { width: 80%;
margin-right: auto;
margin-left: auto;
background-color: #ffffcc;
min-width: 700px;
max-width: 1024px;
box-shadow: 3px 3px 3px #333333;
}
header { background-color: #ccaa66;
background-image:url("javalogo.gif");
background-position:center;
background-repeat:no-repeat;
color: #000000;
height:100px;
}
h1 {margin:0;
text-indent:100%;
white-space:nowrap;
overflow:hidden;
}
h2 { text-transform:uppercase;
background-color:#ffffcc;
color:#663300;
font-size:1.2em;
border-bottom:1px solid #000000;
padding:5px 0 0 5px;
margin-right:20px;
clear: left;
}
nav { text-align: center;
float:left;
width:100px;
font-weight:bold;
padding-top:10px;
/* unvisited link */
nav a:link {
color: #996633;
{
/* visited link */
nav a:visited {
color: #ccaa66;
}
/* mouse over link */
nav a:hover {
color: #330000;
}
nav ul {list-style-type:none;
}
}
footer { background-color: #ccaa66;
color: #000000;
font-size: .60em;
font-style: italic;
text-align: center;
padding-top:20px;
padding-bottom:20px;
clear:both;
}
main { padding-top: 10px;
padding-bottom:30px;
padding-left:20px;
padding-right:20px;
margin-left:150px;
background-color:#f2eab7;
color:#000000;
overflow:auto;
}
.details { padding-left: 20%;
padding-right: 20%;
overflow:auto;
}
img { border-style: none; }
nav a {text-decoration:none;
padding-bottom:15px;
}
.floatright {float: right;
padding-left:20px;
}
.floatleft{float: left;
padding-right:20px;
padding-bottom:bottom;
}
header,nav,main,footer{display:block;}<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaJam Coffee House</title>
<meta charset="utf-8">
<link rel="stylesheet" href="javajam.css">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<header>
<h1>JavaJam Coffee House</h1>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="music.html">Music</a></li>
<li><a href="jobs.html">Jobs</a></li>
</ul>
</nav>
<main>
<p>Follow the winding road to JavaJam...</p>
<img src="windingroad.jpg" class="floatright" alt="winding road through the woods"
height="156" width="333">
<ul>
<li>Specialty Coffee and Tea</li>
<li>Bagels, Muffins, and Organic Snacks</li>
<li>Music and Poetry Readings</li>
<li>Open Mic Night</li>
</ul>
<div>
12312 Main Street<br>
Mountain Home, CA 93923<br>
1-888-555-5555<br>
<br>
</div>
</main>
<footer>
Copyright © 2014 JavaJam Coffee House<br>
<a href="mailto:yourfirstname@yourlastname.com">yourfirstname@yourlastname.com</a>
</footer>
</div>
</body>
</html>
3 个答案:
答案 0 :(得分：1)
问题在于CSS： 1.你没有用＆＃34;}＆＃34;关闭导航在nav {}块中。 2.而不是＆＃34;}＆＃34;你已经在nav a：link block的末尾放了一个开括号。
nav { text-align: center;
float:left;
width:100px;
font-weight:bold;
padding-top:10px;
/* unvisited link */
nav a:link {
color: #996633;
{
上面的代码应该是这样的：
nav { text-align: center;
float:left;
width:100px;
font-weight:bold;
padding-top:10px;
}
/* unvisited link */
nav a:link {
color: #996633;
}
答案 1 :(得分：0)
＆＃13;
＆＃13;
＆＃13;
＆＃13;
body { background-color: #ffffcc;
background-image: url(background.gif);
color: #330000;
font-family: Verdana, Arial, sans-serif;
}
#wrapper { width: 80%;
margin-right: auto;
margin-left: auto;
background-color: #ffffcc;
min-width: 700px;
max-width: 1024px;
box-shadow: 3px 3px 3px #333333;
}
header { background-color: #ccaa66;
background-image:url("javalogo.gif");
background-position:center;
background-repeat:no-repeat;
color: #000000;
height:100px;
}
h1 {margin:0;
text-indent:100%;
white-space:nowrap;
overflow:hidden;
}
h2 { text-transform:uppercase;
background-color:#ffffcc;
color:#663300;
font-size:1.2em;
border-bottom:1px solid #000000;
padding:5px 0 0 5px;
margin-right:20px;
clear: left;
}
nav { text-align: center;
float:left;
width:100px;
font-weight:bold;
padding-top:10px;
}
/* unvisited link */
nav a:link {
color: #996633;
}
/* visited link */
nav a:visited {
color: #ccaa66;
}
/* mouse over link */
nav a:hover {
color: #330000;
}
nav ul {list-style-type:none;
}
}
footer { background-color: #ccaa66;
color: #000000;
font-size: .60em;
font-style: italic;
text-align: center;
padding-top:20px;
padding-bottom:20px;
clear:both;
}
main { padding-top: 10px;
padding-bottom:30px;
padding-left:20px;
padding-right:20px;
margin-left:150px;
background-color:#f2eab7;
color:#000000;
overflow:auto;
}
.details { padding-left: 20%;
padding-right: 20%;
overflow:auto;
}
img { border-style: none; }
nav a {text-decoration:none;
padding-bottom:15px;
}
.floatright {float: right;
padding-left:20px;
}
.floatleft{float: left;
padding-right:20px;
padding-bottom:bottom;
}
header,nav,main,footer{display:block;}<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaJam Coffee House</title>
<meta charset="utf-8">
<link rel="stylesheet" href="javajam.css">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<header>
<h1>JavaJam Coffee House</h1>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="music.html">Music</a></li>
<li><a href="jobs.html">Jobs</a></li>
</ul>
</nav>
<main>
<p>Follow the winding road to JavaJam...</p>
<img src="windingroad.jpg" style = "float:right;" alt="winding road through the woods"
height="156" width="333">
<ul>
<li>Specialty Coffee and Tea</li>
<li>Bagels, Muffins, and Organic Snacks</li>
<li>Music and Poetry Readings</li>
<li>Open Mic Night</li>
</ul>
<div>
12312 Main Street<br>
Mountain Home, CA 93923<br>
1-888-555-5555<br>
<br>
</div>
</main>
<footer>
Copyright © 2014 JavaJam Coffee House<br>
<a href="mailto:yourfirstname@yourlastname.com">yourfirstname@yourlastname.com</a>
</footer>
</div>
</body>
</html>
在Img上添加style = "float:right;"
答案 2 :(得分：0)
您的CSS文件存在问题。有很多未公开的括号。我在下面附上了一些：
nav { text-align: center;
float:left;
width:100px;
font-weight:bold;
padding-top:10px;
<-----------------------THIS IS NOT CLOSED----->
/* unvisited link */
nav a:link {
color: #996633;
<-----------------------THIS IS NOT CLOSED----->
{ <-----------------------Extra bracket opened----->
/* visited link */
nav a:visited {
color: #ccaa66;
}
它工作正常。
＆＃13;
＆＃13;
＆＃13;
＆＃13;
body { background-color: #ffffcc;
background-image: url(background.gif);
color: #330000;
font-family: Verdana, Arial, sans-serif;
}
#wrapper { width: 80%;
margin-right: auto;
margin-left: auto;
background-color: #ffffcc;
min-width: 700px;
max-width: 1024px;
box-shadow: 3px 3px 3px #333333;
}
header { background-color: #ccaa66;
background-image:url("javalogo.gif");
background-position:center;
background-repeat:no-repeat;
color: #000000;
height:100px;
}
h1 {margin:0;
text-indent:100%;
white-space:nowrap;
overflow:hidden;
}
h2 { text-transform:uppercase;
background-color:#ffffcc;
color:#663300;
font-size:1.2em;
border-bottom:1px solid #000000;
padding:5px 0 0 5px;
margin-right:20px;
clear: left;
}
nav { text-align: center;
float:left;
width:100px;
font-weight:bold;
padding-top:10px;
}
/* unvisited link */
nav a:link {
color: #996633;
}
/* visited link */
nav a:visited {
color: #ccaa66;
}
/* mouse over link */
nav a:hover {
color: #330000;
}
nav ul {list-style-type:none;
}
footer { background-color: #ccaa66;
color: #000000;
font-size: .60em;
font-style: italic;
text-align: center;
padding-top:20px;
padding-bottom:20px;
clear:both;
}
main { padding-top: 10px;
padding-bottom:30px;
padding-left:20px;
padding-right:20px;
margin-left:150px;
background-color:#f2eab7;
color:#000000;
overflow:auto;
}
.details { padding-left: 20%;
padding-right: 20%;
overflow:auto;
}
img { border-style: none; }
nav a {text-decoration:none;
padding-bottom:15px;
}
.floatright {float: right;
padding-left:20px;
}
.floatleft{float: left;
padding-right:20px;
padding-bottom:bottom;
}
header,nav,main,footer{display:block;}<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaJam Coffee House</title>
<meta charset="utf-8">
<link rel="stylesheet" href="javajam.css">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<style>
</style>
</head>
<body>
<div id="wrapper">
<header>
<h1>JavaJam Coffee House</h1>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="music.html">Music</a></li>
<li><a href="jobs.html">Jobs</a></li>
</ul>
</nav>
<main>
<p>Follow the winding road to JavaJam...</p>
<img src="windingroad.jpg" class="floatright" alt="winding road through the woods"
height="156" width="333">
<ul>
<li>Specialty Coffee and Tea</li>
<li>Bagels, Muffins, and Organic Snacks</li>
<li>Music and Poetry Readings</li>
<li>Open Mic Night</li>
</ul>
<div>
12312 Main Street<br>
Mountain Home, CA 93923<br>
1-888-555-5555<br>
<br>
</div>
</main>
<footer>
Copyright © 2014 JavaJam Coffee House<br>
<a href="mailto:yourfirstname@yourlastname.com">yourfirstname@yourlastname.com</a>
</footer>
</div>
</body>
</html>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？