"float: right" 不会把 div 放在右边答案

【问题标题】："float: right" doesn't put the div on the right side"float: right" 不会把 div 放在右边
【发布时间】：2015-06-14 23:44:38
【问题描述】：

我不明白为什么我不能让它工作。我正在制作这个 CSS 垂直侧边菜单，我希望它位于窗口的右侧。所以我有菜单的 div 并将它包装在另一个 div 中，将其设置为向右浮动。

问题是，它卡在左侧。我希望能够滚动它，但将页面的其余部分留在同一个地方。这是小提琴： http://jsfiddle.net/xQgSm/121/

这是代码的一部分：

<div id="wrap" style="height: 100%; position: absolute; overflow-y: scroll; float: right">
    <div id='cssmenu'>
    <ul>
   <li class='active'><a href='#'><span>Home</span></a></li>
   <li class='has-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li><a href='#'><span>Product 1</span></a></li>
         <li><a href='#'><span>Product 2</span></a></li>
         <li><a href='#'><span>Product 3</span></a></li>
      </ul>
   </li>

【问题讨论】：

#wrap{ right: 0;} jsfiddle.net/xQgSm/122
我更喜欢这个。

标签： javascript jquery html css

【解决方案1】：

你需要你的包装器是页面的width: 100%。

尝试添加：

<div id="wrap" style="height: 100%; width: 100%; position: absolute; overflow-y: scroll;">

【讨论】：

成功了。惊人。喜欢这个网站。为什么一定要这样？
好吧，您将元素浮动到父元素的右侧。如果您的父元素未设置为 100%，它将是其中内容的大小，因此您的菜单是向右浮动的，但包装器只是菜单的宽度，因此它看起来是在左侧。
@wannabeprogrammer 查看此答案以很好地了解浮动的工作原理。 stackoverflow.com/questions/30813047/…

【解决方案2】：

因为你的元素有position: absolute;，所以正确的方法是设置right属性，例如：

CSS：

#wrap{ right: 0;}

-jsFiddle-

【讨论】：

【解决方案3】：

因为你的#wrap 是绝对定位的，所以它失去了默认的块行为，这意味着它不再是 100% 宽度，而只是与其最宽的子元素一样宽。

所以在你的情况下，你有 3 种可能性：

松开位置绝对或
位置将#wrap向右或
给它100%-width 然后只浮动#cssmenu

【讨论】：

【解决方案4】：

我在一些 rtl 和分配方面遇到了同样的问题

width:100%

为我工作。您的代码也已修复尝试 http://jsfiddle.net/ofdqyy4g/

【讨论】：