如何在屏幕右侧放置div元素

时间:2013-12-13 20:52:48

标签: html css

我试图让这个div一直到屏幕的右侧。这是html:

  <html>
 <head>
  title></title>
  <link rel="stylesheet" type="text/css" href="../css/style.css"/>
 </head>
  <h1> </h1>
 <body>

<div id="bannerR">
 <a href="yahoo.com" target=_blank>
 <img src="yahoo.com" border=0></a>
</div>

这是style.css

        #header{background-color: #fff; width: 1000px; position: relative; }

     #bannerL{ position: relative; top: 500px; left: 500px; }
      #bannerR{ position: relative; float: right; }



        body    {
     background-image: url("beach.gif");
     background-repeat: no-repeat;
      background-attachment: fixed;
     background-position: center;
     margin-top:100px;
     margin-right:180px;
     margin-bottom:10px;
    margin-left:200px;

}

请帮助,我是非常新的代码并买了一本书,但没有帮助。我花了几个小时试图得到这个但无济于事。

3 个答案:

答案 0 :(得分:0)

确保您的DIV不包含在空间有限的元素中(不会跨越页面的整个宽度)

答案 1 :(得分:0)

确保将css文件链接到HTML,以便浏览器知道您正在使用的css文件。

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="your_style.css">
  </head>
  <body>
    <!-- YOUR HTML -->
  </body>
</html>

答案 2 :(得分:0)

您的body个样式包含margin-right:180px。因此,#bannerR永远不会一直向右浮动。删除该样式,它会工作。这是一些代码:

body { background-image: url("beach.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: center; }

这是在证明中展示它的小提琴:http://jsfiddle.net/rzKaz/1/