Question

我在div中有两组按钮，一个div需要浮动在broswer的左侧，另一个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是“右键”div

Answer 1

它并没有混淆，它正在做你要告诉它的事情。在#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;
}

Answer 2

因为您使用的是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;
}

Answer 3

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

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

#leftbuttons { 
    left:8px;
    top:180px;
    margin:0;
}

Div不会浮动在浏览器的右侧

3 个答案: