“float：right”不會將div放在右側

Question

我不明白為什么我不能讓這個工作。 我正在制作這個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>

Answer 1

你需要你的包裝器width: 100%頁面的width: 100% 。

嘗試添加：

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

Answer 2

因為你的元素有position: absolute; ，正確的方法是設置right屬性，例如：

CSS：

#wrap{ right: 0;}

-jsFiddle-

Answer 3

因為#wrap是絕對的，所以它會丟失默認的塊行為，這意味着它不再是100％-width，而只是與最寬的子項一樣寬。

所以在你的情況下，你有3種可能性：

• 絕對 或 松散的位置
• 在#wrap 姿勢要正確 或
• 給它100％ -width，然后只浮動#cssmenu

Answer 4

我有一些rtl和分配同樣的問題

width:100%

為我工作。 您的代碼也是固定的嘗試http://jsfiddle.net/ofdqyy4g/