Question

＆＃13;

 body {
   margin: 0;
   font-family: arial;
   line-height: 16px;
 }
 #topbar {
   background-color: #600c0c;
   width: 100%;
   height: 46px;
   color: white;
   margin: 0;
 }
 .fixedwidth {
   width: 1050px;
   margin: 0 auto;
 }
 #logodiv {
   padding-top: 5px;
   float: left;
   border-right: 1px solid #b20505;
   padding-right: 10px;
   padding-bottom: 4px;
 }
 #signindiv {
   font-weight: bold;
   font-size: 0.9em;
   border-right: 1px solid #b20505;
   padding: 1px 80px 0px 12px;
   float: left;
 }
 #topmenudiv {
   float: left;
 }
 #topmenudiv ul {
   padding: 0;
   margin: 0px;
 }
 #topmenudiv li {
   list-style: none;
   font-weight: bold;
   font-size: 0.9em;
   border-right: 1px solid #b20505;
   height: 100%;
   padding: 15px 20px 15px 20px;
   float: left;
 }
 #searchdiv {
   float: left;
   padding: 5px 0 0 10px;
 }
 #searchdiv input {
   height: 25px;
   border: none;
   font-size: 0.9em;
   padding-left: 10px;
   background-image: url(images/Search.png);
   background-repeat: no-repeat;
   background-position: right center;
 }
 .break {
   clear: both;
 }
 #newsbar {
   background-color: #b20505;
   width: 100%;
   height: 80px;
   color: white;
   margin: 0;
 }
 #newsbar p {
   margin: 0;
   padding: 0;
   padding-top: 30px;
   padding-left: 0px;
   float: left;
 }
 #newsheader {
   font-size: 3em;
 }
 #uk {
   font-size: 0.7em;
   padding-left: 8px;
 }
 rss {
   float: right;
 }

＆＃13;

<!doctype html>
<html>

<head>
  <title>My BBC</title>
  <meta charset="utf-8" />
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>

<body>
  <div id="container">
    <div id="topbar">
      <div class="fixedwidth">
        <div id="logodiv">
          <img src="images/BBCLogo.png" />
        </div>
        <div id="signindiv">
          <p>Sign In</p>
        </div>
        <div id="topmenudiv">
          <ul>
            <li>News</li>
            <li>Sport</li>
            <li>Weather</li>
            <li>iPlayer</li>
            <li>TV</li>
            <li>Radio</li>
            <li>More...</li>
          </ul>
        </div>
        <div id="searchdiv">
          <input type="text" placeholder="Search" />
        </div>
      </div>
    </div>
    <div class="break"></div>
    <div id="newsbar">
      <div class="fixedwidth">
        <p id="newsheader">NEWS <span id="uk">UK</span>
        </p>
        <div id="rss">
          RSS
        </div>
      </div>
    </div>
  </div>
</body>

</html>

＆＃13;

我试图模仿BBC新闻网站，我的问题是＆＃34; RSS＆＃34;应该是浮动的，但它并没有，尽管我已经为整个容器div分配了宽度。我不明白。 Here is how it looks..

Answer 1

如果没问题，你可以像这样使用..

<div class="fixedwidth">
      <div id="rss">
          RSS
        </div>
        <p id="newsheader">NEWS <span id="uk">UK</span>
        </p>

      </div>

只需在#newsheader内容上方使用#rss内容即可

Answer 2

对不起以前的回答！实际上，你缺少了＃34;＃＆＃34;在样式表中。它应该是

  #rss {
   float: right;
 }

只有rss在那里。只需添加＆＃34;＃＆＃34;在RSS之前。然后它会工作

CSS- Float没有像它应该的那样工作

2 个答案: