浮动DIV占用了整个行，而不是只用左侧空间

请看看下面的网页。从我发布的源代码中，您可以看到浮动div实际上低于图像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>

enter image description here

来源

2014-09-30 newguy

这是不是因为你有jquery将贴纸设置为'position：fixed;顶部：0;'或者这是否发生在你滚动之前？ – Pete 2014-09-30 10:57:03

也许设定＃DIV标签内联块，而不是块 – CRABOLO 2014-09-30 11:01:16

还请了'wrapper'和'row2'提供的css – Pete 2014-09-30 11:05:43

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

由170像素降低下一个元素的宽度，它应该适合。

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

来源

2014-09-30 11:03:33 strah

浮动DIV占用了整个行，​​而不是只用左侧空间

回答

相关问题

浮动DIV占用了整个行，而不是只用左侧空间