0

我希望将浮动在下一页窗口右侧的框定位。

http://mikegeorge.org/acej/index.html

我想将它相对于其中包含所有文本的白色 div 定位，因此它不是附加到窗口的一侧，而是从内容区域浮动 10-20 像素。

CSS 源代码

#float-box {
position: fixed;
right: 10px;
top: 100px;

width: 150px;
padding: 10px 5px;
text-align: center;

background-color: #fff;

border: 5px solid rgba(180, 180, 180, .7);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;

display: none;
}

.fb-1 {
height: 62px;
margin-bottom: 10px;
}

.fb-2 {
height: 60px;
margin-bottom: 10px;
}

.fb-3 {
height: 60px;
}

谢谢你的帮助！

4

3 回答 3

1

你需要把它放进去social-float并wrapper div更新它的样式right:-160px。160px是宽度，social-float更多10px是额外边距。不要忘记添加position:relative到#wrapper

请social-float用下面的css替换

position: fixed;
left: 50%;
top: 100px;
width: 150px;
padding: 10px 5px;
text-align: center;
background-color: 
white;
border: 5px solid 
rgba(180, 180, 180, .7);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
display: none;
margin-left: 380px;
于 2012-05-23T05:12:24.370 回答
0

将你的 div 移动到#Wraper 中，

<div id="wrapper">


  <p>Curabitur id neque eget justo ultrices semper. Suspendisse eget sapien eros, sed dapibus justo. Fusce ullamcorper, felis vitae consequat malesuada, tortor metus mattis ligula, nec pellentesque nisl sapien vel velit. Sed augue sem, malesuada ut elementum dictum, blandit vitae lorem. Aliquam eu nulla neque, vitae feugiat tortor. In id augue nisl. Donec congue arcu vel mi semper sit amet porttitor tortor condimentum. Donec non eros tempor dolor bibendum venenatis. Donec ornare imperdiet leo, non venenatis odio mollis et. Suspendisse in sapien eu sapien egestas elementum.    </p>
  <p>Sed cursus consequat euismod. Pellentesque sagittis, odio et luctus sagittis, tellus mauris malesuada leo, in tincidunt nisl urna ac urna. Morbi vestibulum faucibus elit vel volutpat. Aliquam erat volutpat. Donec posuere velit vitae risus mattis molestie. Curabitur posuere egestas justo, quis iaculis leo convallis ut. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut tristique augue et leo consectetur in porttitor felis euismod. Aliquam ac mi condimentum arcu euismod molestie.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porttitor adipiscing turpis, eu tristique tellus congue sit amet. In non ipsum risus. In hac habitasse platea dictumst. Sed eu mauris nulla. Ut vitae arcu urna, eu sodales enim. Curabitur porta elementum diam at adipiscing. Sed consectetur convallis neque, eu fermentum lectus mattis in. Ut tristique feugiat elementum. Quisque rutrum dui quis massa commodo id tempor dui vulputate. </p>
  <p>In nisi felis, venenatis at pellentesque et, bibendum eget justo. Sed imperdiet commodo rutrum. Proin massa felis, porttitor et commodo at, semper eu sapien. Curabitur eu neque libero. Proin consequat sagittis felis, ut ultricies orci auctor eget. Sed a vehicula risus. Vivamus nulla nisi, lobortis a semper nec, lobortis vel felis. Cras et sem magna, vel ullamcorper justo. Quisque volutpat massa eget leo blandit ultricies eget non nisl. Nunc vel lacus quis risus placerat consectetur vitae quis lectus. Nullam a ante ut nibh facilisis viverra. Nullam mollis, risus sit amet eleifend mattis, massa lorem tempor mauris, sed dictum nisl enim accumsan velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in faucibus enim. Nulla at mi orci, vel commodo felis. Donec ac tristique ante. </p>
  <p>Nunc eu tellus lectus. Vivamus tellus orci, scelerisque a gravida id, suscipit ut purus. Duis eu elit magna. Mauris quis tellus tellus. Fusce sed lorem in lectus aliquam cursus. Etiam orci lectus, fringilla sed imperdiet id, pharetra ut nisi. In hac habitasse platea dictumst. Vestibulum sed metus vel justo pulvinar vehicula ut lobortis mi. Cras viverra porta enim et malesuada. Quisque ullamcorper justo turpis, eu consequat ligula. Nam eget massa enim, in dictum felis. Nam cursus augue eu augue dignissim venenatis. Vestibulum in dignissim odio. Vivamus pulvinar, diam in tempor varius, tortor dolor tempus arcu, vel fringilla lectus eros at mi. </p>
**<div id="social-float" style="display: block; ">
    <div class="sf-twitter">
        Yo! Sign up fo' this!
    </div>

    <div class="sf-facebook">
        You know you want to!
    </div>

    <div class="sf-plusone">
        <a href="http://lulzdaily.com/no-im-not-drunk" target="_blank">Click Me, Por Favor!</a>

    </div>
</div>**
</div>

在css下面使用，

#social-float {
left: 1020px;
top: 100px;
width: 150px;
padding: 10px 5px;
text-align: center;
background-color: 
white;
border: 5px solid 
rgba(180, 180, 180, .7);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
display: none;
}
于 2012-05-23T05:20:47.023 回答
0

请将您的social-floatid 样式替换为：

#social-float {
    background-color: #FFFFFF;
    border: 5px solid rgba(180, 180, 180, 0.7);
    border-radius: 8px 8px 8px 8px;
    display: none;
    float: right;
    margin-left: 715px;
    padding: 10px 5px;
    position: fixed;
    text-align: center;
    top: 100px;
    width: 150px;
}
于 2012-05-23T05:26:02.687 回答