我尝试使用 bootstrap twitter 来格式化我的网站。当我将我的几个 div 添加到行列格式中时。我有一个带有 div 的 9x9 网格。我想在网格外的固定位置再放置一个元素。我为我的元素使用 row-fluid 和 span 类。我怎样才能将我的最后一个元素完全放在我的页面右侧？
我的代码：
<body onload='drawAll();'>
<section>
<div class="container-fluid">
<div class="row-fluid">
<div id="mapWidget" class="debug span8">
<canvas id="map"
width="500"
height="280"
></canvas>
<canvas id="layer"
width="500"
height="280"
style= "position:absolute;
left:0px;
top:0px;"></canvas>
</div>
</div>
<div class="row-fluid">
<div id="profiles" class = "span4">
<script id="profileTemplate" type="text/template">
<div class= "hashTags" id = 'redLine'>
<h1> <img src="images/tagIcon.png"/> HASHTAGS</h1>
<br><font size = "6"><%= tagsCloud.tags[0] %> </font>
<%= tagsCloud.tags[1] %>
<%= tagsCloud.tags[2] %>
<%= tagsCloud.tags[3] %>
<font size = "5"><%=tagsCloud.tags[4] %> </font>
<%= tagsCloud.tags[5] %>
<%= tagsCloud.tags[6] %>
<%= tagsCloud.tags[7] %></br>
<br> <%= tagsCloud.tags[8] %>
<%= tagsCloud.tags[9] %>
<%= tagsCloud.tags[10] %>
<font size = "6"><%= tagsCloud.tags[11] %> </font>
<%= tagsCloud.tags[12] %>
<%= tagsCloud.tags[13] %>
<%= tagsCloud.tags[14] %>
<%= tagsCloud.tags[15] %></br>
<br><font size = "6"><%= tagsCloud.tags[0] %> </font>
<%= tagsCloud.tags[1] %>
<%= tagsCloud.tags[2] %>
<%= tagsCloud.tags[3] %>
<font size = "5"><%= tagsCloud.tags[4] %> </font>
<%= tagsCloud.tags[5] %>
<%= tagsCloud.tags[6] %>
<%= tagsCloud.tags[7] %></br>
</div>
</script>
</div>
<div class = 'usersCloud debug span2'>
<h2 ><img src="images/chat.png"/>TOP COMMENTERS</h2>
<img src="images/userCloud.png" />
</div>
<div class = ' button span2'>
<img src="images/menu.png"/>
</div>
</div>
<div class="row-fluid">
</div>
<div class="row-fluid">
<div id="footer" class="debug span4"><img src="images/logo.png"/></div>
</div>
我非常特别的元素是带有菜单 png 图像的元素，当我将它放在网格之外时，它会出现意想不到的行为！CSS代码：
.button{
padding: 10px 10px 10px 10px;
display:inline-block;
width: 24px;
right:-80px;top:0px;
position:fixed;
}