2浮動的div與第一個div寬度100％

Question

我有2個div浮在容器div的左邊。第二個div有width: 20px。我需要第一個div來填充所有可用空間並保持內聯。將第一個div寬度設置爲100％不起作用，因爲固定寬度的第二個div會下降。我能怎麼做？

的代碼說明如下：http://jsfiddle.net/7EW5h/4/

感謝

Answer 1

您是否嘗試過使用position:absolute;，因爲你需要的元素的位置？

見小提琴 - JSFiddle Example

Answer 2

可以使用calc CSS3功能和動態寬度設置爲#inner1股利如下：

width: calc(100% - 20px); 

這將是與Firefox 16（或更高版本）兼容和Internet Explorer 9（或更高版本）。

可以添加供應商前綴，如下所示：

width: -moz-calc(100% - 20px); 
width: -webkit-calc(100% - 20px); 
width: calc(100% - 20px); 

，使其與鉻19（或更高版本），火狐4（或更高版本），互聯網瀏覽器9（或更高版本）和Safari 6兼容的（或後來）。

你可以在這裏查看兼容表：http://caniuse.com/#search=calc

關於你的例子，我不得不設置border: 0到#inner1和#inner2的div。

Answer 3

我已經測試，並制定了在Chrome，IE9，Firefox和Opera的解決方案：

1. 使用的容器兩個輸入元素。
2. 更改元素的順序，使正確一個是第一個。
3. 不要浮動應該填充剩餘空間的元素，只需將display設置爲block（這是div元素的默認值）。
4. 將較大容器的margin-right設置爲右元素的總寬度。在這裏，我們還需要考慮兩個元素的邊界，邊距和填充等內容。

HTML：

<div id="container"> 
    <div id="inner2"> 
     <input /> 
    </div> 
    <div id="inner1"> 
     <input /> 
    </div> 
</div>​ 

CSS：

#inner2 { 
    float: right; 
} 
#inner2 input { 
    height: 20px; 
    width: 20px; 
    border: 1px solid #000; 
} 
#inner1 { 
    margin-right: 24px; 
} 
#inner1 input { 
    width: 100%; 
    height: 20px; 
    border: 1px solid #000; 
} 

活生生的例子：http://jsfiddle.net/7EW5h/22/。 另請注意，我已明確設置了兩個input元素的邊框。

我不能在不改變HTML或兩個元素的順序而不使用絕對定位的情況下工作。

Answer 4

我認爲，沒有複雜的事情，你可以做到以下幾點。

1. 從兩個輸入中移除浮標。
2. 如下圖所示，絕對放置第二個輸入。

3. 爲第一個輸入添加填充以避免內容重疊。 還，即使它不是在我下面的代碼所示，別忘了默認的邊框，margin和padding的存在。

    #container { 
         overflow: hidden; 
         background-color: red; 
        } 
   
          #inner1 { 
           width: 100%; 
           background-color: blue; 
           padding-right:45px; 
   
          } 
   
         #inner2 { 
          height: 20px; 
          width: 20px; 
          background-color: green; 
          position:absolute; 
          right:0; 
          top:0; 
          }