浮動左邊div的自動擴展寬度在固定寬度的浮動右邊div旁邊

我基本上在包含div1中有兩個div（div2和div3）。 div2浮動左和div3浮動權利。 Div3是固定寬度，而div2 應該自動擴展到div3。我似乎遇到的問題是，當div2 auto中的內容擴展到div2（輸入框）的100％時，div2本身不會自動擴展到div3;我不知道爲什麼它不按我期望的方式工作。相反，如果我將div2設置爲寬度：100％，則最終會推下div2;這對我來說是有道理的。浮動左邊div的自動擴展寬度在固定寬度的浮動右邊div旁邊

我希望這樣的事情：

------------div1-------------- 
[--------div2----------][div3] 
-----------/div1--------------

我一直在敲打我的頭在此，試圖浮動：正確的，浮動：左，明確：對，拉左，右拉在引導和似乎沒有任何工作，因爲我想。

我打算使用bootstraps列自動調整大小，但要求是div3必須始終是相同的大小，無論屏幕大小如何。

這裏是我的簡單JSfiddle的例子。任何人都可以請指出我的問題？我有一個感覺，答案是盯着我的臉。

陪同代碼：

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
    <style> 
    body { 
     min-height: 2000px; 
     background-color: #EEE; 
    } 

    a:focus { outline: 0;} 

    .tab-content {background-color: #f9f9f9;} 

    #maintab .active a { background-color: #f9f9f9;} 


    #page1SearchBox{ 
     float:left; 
     margin-right: 80px; 
     width:auto; 
     overflow: auto; 
    } 
    .searchBoxContainer { 
     position: relative; 
    } 
    .searchBoxContainer .searchBoxIcon { 
     padding-left: 5px; 
     padding-top:6px; 
     position: absolute; 
    } 

    .searchBoxContainer .searchQuery { 
     border: 1px solid #ddd; 
     width: 100%; 
     padding-left: 25px; 
     height:30px; 
    } 

    #page1DropDown{ 
     float:right; 
     width: 80px; 
    } 
    #page1DropDownMenu{ 
     width: 100%; 
    } 

    #page1DropDownListButtonGroup{ 
     width: 100%; 
    } 

    .page1Container{ 
     border: 1px solid #ddd; 
    } 
    </style> 
</head> 

<body> 
    <div class="container"> 
     <div class="tab-content case-tab-content"> 
      <div id="page1" class="tab-pane active"> 
       <div id="page1Container"> 
        <div> 
         <div id="page1SearchBox"> 
          <div class="searchBoxContainer"> 
           <div class="searchBoxIcon"><span class="glyphicon glyphicon-search"></span></div> 
           <div class="searchBoxInput"><input class="searchQuery text-muted" type="text" placeholder="Search"></input></div> 
          </div> 
         </div> 
         <div id="page1DropDown"> 
          <div class="btn-group" id="page1DropDownListButtonGroup"> 
           <button class="btn btn-default btn-sm dropdown-toggle" type="button" id="page1DropDownMenu" data-toggle="dropdown"> 
            % 
            <span class="caret"></span> 
           </button> 
           <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="page1DropDownMenu"> 
          </div> 
         </div> 
         <div style="clear:right;"></div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!--Load 3rd party first--> 
    <script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js" type="text/javascript"></script> 
</body> 
</html>

來源

2014-06-24 Patrick Bateman

看起來的jsfiddle下跌，所以我不能看到你的示例代碼。但是，如果我正確理解問題，一個可能的解決方案可能是使用CSS3 calc（）函數（https://developer.mozilla.org/en-US/docs/Web/CSS/calc）。它允許您即時混合百分比和固定像素值。

.div2 { 
    float: left; 
    width: calc(100% - 300px); 
} 
.div3 { 
    float: left; 
    width: 300px; 
}

請注意，這被歸類爲實驗在IE8或更低版本（http://caniuse.com/calc）中不起作用。

來源

2014-06-24 16:00:25

這真的很酷，謝謝！這是一個新的應用程序，所以團隊決定，任何低於IE9的東西都不會被支持。 –

浮動左邊div的自動擴展寬度在固定寬度的浮動右邊div旁邊

回答

相關問題