1

我在一个 div 中有两组按钮，一个 div 需要浮动在浏览器的左侧，另一个浮动在右侧。他们应该被固定，所以他们永远不会移动。我遇到的唯一问题是让正确的人进入浏览器的右侧。它似乎很困惑，想留在左边。

HTML：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <HTML>
    <HEAD>
    <TITLE>My Company</TITLE>
    <SCRIPT SRC="jscript/jquery/jquery-1.10.2.min.js"></SCRIPT>
    <? include("include/restocss.php"); ?>
</HEAD>
<BODY>
    <DIV ID="leftbuttons">
        <DIV CLASS="activitybutton">This is left</DIV><BR>
        <DIV CLASS="activitybutton"></DIV><BR>
        <DIV CLASS="activitybutton"></DIV><BR>
        <DIV CLASS="activitybutton"></DIV>
    </DIV>
    <CENTER>
    <DIV ID="wrapper">
        <DIV ID="header">
            <img src='css/images/logo.png' />
        </DIV><br>
        <DIV ID="navbar">NAVIGATION</DIV>
            <script type="text/javascript"> 
                $(function() {
                    moveScroller();
                });
            </script>
        <DIV ID="content">

        </DIV>
        <DIV ID="footer">

        </DIV>
    </DIV>
    </CENTER><
    <DIV ID="rightbuttons">
        <DIV CLASS="activitybutton">This is right</DIV><BR>
        <DIV CLASS="activitybutton"></DIV><BR>
        <DIV CLASS="activitybutton"></DIV><BR>
        <DIV CLASS="activitybutton"></DIV>
    </DIV>
</BODY>
</HTML>

CSS：

{ margin: 0; padding: 0; border: 0; }

body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
 background-color: #B99666;
 background-image: url('images/bg.jpg');
 background-size: 100%;
 background-repeat: no-repeat;
 background-attachment: fixed;
}

#wrapper { 
 margin: 0 auto;
 width: 800px;

}

#header {
 float:left;
 color: #333;
 width: 705px;
 padding: 10px;
 border: 0px solid #ccc;
 height: auto;
 margin: 5px 0px 5px 0px;
 background: #F2F2E6;
 /*margin-left: 95px;*/
}

.activitybutton{
 color: #333;
 width: 195px;
 float: left;
 padding: 10px;
 border: 1px solid #ccc;
 height: 60px;
 margin: 0px 0px 5px -11px;
 background: #F2F2E6;
 z-index: 2;
}

#navbar {
 width: 720px;
 border: 1px solid #ccc;
 background: #3A451C;
 margin: 5px 5px 5px 0px;
 margin-top: 0px;
 padding: 0px;
 /*margin-left: 95px;*/
 height: auto;
 float: left;
}

#leftbuttons { 
 color: #333;
 border: 0px solid #ccc;
 /*background: #E7DBD5;*/
 margin: 180px 0px 0px 0px;
 padding: 10px;
 height: auto;
 width: 125px;
 position: fixed;
 float: left;
 z-index: 2;
}

#content {
 float: left;
 color: #333;
 border: 1px solid #ccc;
 background: #F2F2E6;
 margin: 0px 5px 5px 0px;
 margin-top: 0px;
 padding: 10px;
 height: 800px;
 width: 705px;
 display: inline;
}

#rightbuttons { 
 color: #333;
 border: 0px solid #ccc;
 /*background: #E7DBD5;*/
 margin: 180px 0px 0px 0px;
 padding: 10px;
 height: auto;
 width: 125px;
 position: fixed;
 float: right;
 z-index: 2;
}

#footer { 
 float: left;
 color: #333;
 border: 1px solid #ccc;
 background: #F2F2E6;
 margin: 0px 5px 5px 0px;
 /*margin-left: 95px;*/
 margin-top: 0px;
 padding: 10px;
 height: 800;
 width: 705px;
 display: inline;
 position: relative;
}

.logfooter { position:relative; bottom: 0px; left: 0px; z-index: 5; display:inline-block; } 
.footerbranch { position:relative; bottom: 232px; left: 702px; z-index: 1; display:inline-block; } 
.navlogbottom { position:relative; bottom: 232px; left: 702px; z-index: 4; display:inline-block; }

有问题的 div 是“rightbuttons” div

4

3 回答 3

0

它并不困惑，它正在做你告诉它做的事情。在您的选择器#rightbuttons中float: left;

将其更改为float: right;

#rightbuttons { 
 color: #333;
 border: 0px solid #ccc;
 /*background: #E7DBD5;*/
 margin: 0px 5px 5px 0px;
 margin-left: 1154px;
 margin-top: 180px;
 position: fixed;
 padding: 10px;
 height: auto;
 width: 195px;
 float: left;
 z-index: 2;
}

需要是....

#rightbuttons { 
 color: #333;
 border: 0px solid #ccc;
 /*background: #E7DBD5;*/
 margin: 0px 5px 5px 0px;
 margin-left: 1154px;
 margin-top: 180px;
 position: fixed;
 padding: 10px;
 height: auto;
 width: 195px;
 float: right;
 z-index: 2;
}
于 2013-10-18T18:32:27.067 回答
0

只要使用right: 0;，因为你正在使用position: fixed;

JSFIDDLE

#rightbuttons { 
  color: #333;
  border: 0px solid #ccc;
  /*background: #E7DBD5;*/
  margin: 0px 5px 5px 0px;
  margin-left: 1154px;
  margin-top: 180px;
  position: fixed;
  padding: 10px;
  height: auto;
  width: 195px;
  z-index: 2;
  right: 0;
}
于 2013-10-18T18:33:37.427 回答
0

而不是浮动这些，我建议您使用顶部、左侧、右侧属性并删除边距以将它们准确定位在您需要它们的位置（向右浮动将使右侧按钮垂直放置在低于左侧按钮的位置）。

#rightbuttons { 
    right:8px;
    top:180px;
    margin:0;
}

#leftbuttons { 
    left:8px;
    top:180px;
    margin:0;
}
于 2013-10-18T18:35:23.763 回答