浮动div占用整行而不是仅使用左侧空间

Question

请查看下面的网页。从我发布的源代码中你可以看到浮动div实际上位于图像div之下但是在页面上图像div保持在浮动div之下。但我希望浮动div保持在侧栏并将图像div移动到主菜单下方。

基本上我想要的只是一个浮动div，这样当我向下移动页面时，浮动div将始终保持在同一位置。如何使左侧的浮动div仅占用左侧的空间。我不希望图像div进入浮动div行。我应该改变css风格吗？

我的css：

.fl_left{float:left;}
.clear {
     clear:both;
}

div#sticker {
    display: block;
    padding:20px;
    margin:20px 10px;
    background:#fff;
    width:170px;
    text-align: center;
}
.stick {
    position:fixed;
    top:0px;
}

我的javascript（我正在使用jQuery）：

<script type="text/javascript">
$(document).ready(function() {
    var s = $("#sticker");
    var pos = s.position();                    
    $(window).scroll(function() {
        var windowpos = $(window).scrollTop();
        if (windowpos >= pos.top) {
            s.addClass("stick");
        } else {
            s.removeClass("stick"); 
        }
    });
});
</script>

我的HTML：

<div class="wrapper row2">
    <div><img src="../images/Homepage_image.jpg" alt="" /></div>
</div>
<div class="fl_left" id="sticker">
  <p class="wechatholder"><img src="../images/wechat.png" alt=""/></p>
  <p>微信号: linaielts</p>
  <p>关注微信客服号获取更多优惠信息</p>
</div>
<div class="wrapper row3">
</div>

Answer 1

你的贴纸＆＃39;是浮动但它仍然需要一些空间（170px宽度），所以如果下一个div（或其他元素）应该是100％宽，它将没有足够的空间放在贴纸旁边。

将下一个元素的宽度减少170px，它应该适合。

.row3 {width: calc(100% - 170px);}