堆栈内存溢出
  繁体   English   中英

.floatright类不会向右浮动

[英].floatright class wont float right

 原文  2016-03-02 09:44:48  6   3    html/ css

问题描述

您好，我无法让我的windingroad.gif浮动到页面右侧，但我不知道自己在做什么错。 我已经尝试了一切，但是我一定会丢失一些东西。 我真的很感谢您的帮助。 

 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 &copy; 2014 JavaJam Coffee House<br> <a href="mailto:yourfirstname@yourlastname.com">yourfirstname@yourlastname.com</a> </footer> </div> </body> </html>

3 个解决方案

解决方案1
 1 已采纳  2016-03-02 10:05:27

问题出在CSS中：1.您尚未在nav {}块中使用“}”关闭导航。 2.您已在导航a：link块的末尾放了方括号，而不是“}”。 

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;
}

解决方案2
 0  2016-03-02 09:57:52

  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 &copy; 2014 JavaJam Coffee House<br> <a href="mailto:yourfirstname@yourlastname.com">yourfirstname@yourlastname.com</a> </footer> </div> </body> </html>

添加style = "float:right;" 在图上

在此处输入图片说明

解决方案3
 0  2016-03-02 09:58:02

您的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;
}

一切正常。 

 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 &copy; 2014 JavaJam Coffee House<br> <a href="mailto:yourfirstname@yourlastname.com">yourfirstname@yourlastname.com</a> </footer> </div> </body> </html>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 为什么我的div不会浮动到右侧 Div不会漂浮在浏览器的右侧 重新使用floatLeft和floatRight来使文本右对齐 自适应设计：固定宽度的右侧边栏不会“浮动” 如何为文本静音 class 向右浮动/向右拉 Flexbox不会浮动到中心 CSS Float无法正常工作 向左浮动和向右浮动 文字不对齐 Cms无法安装权利
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM