고정 폭 float-right div 옆에있는 float-left div의 너비 자동 확장

기본적으로 포함 div1에는 두 개의 div (div2 및 div3)가 있습니다. div2는 왼쪽으로 떠 있고 div3는 오른쪽으로 수레를 띄웁니다. Div3은 고정 폭이며 div2는 이어야합니다.은 div3까지 자동 확장됩니다. div2 auto의 내용이 div2 (입력 상자)의 100 %까지 확장되지만 div2 자체는 div3으로 자동 확장되지 않습니다. 왜 내가 기대 한대로 작동하지 않는지 나는 모른다. 대조적으로 div2를 width : 100 %로 설정하면 div2를 아래로 밀어냅니다. 이것은 나에게 의미가 있습니다.고정 폭 float-right div 옆에있는 float-left div의 너비 자동 확장

내가 기대 같은 것을 :

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

내가 플로트 노력이 나의 머리를 두드리는 있었어요 : 오른쪽 플로트 : 왼쪽, 명확한 : 오른쪽, 왼쪽으로 당겨, 부트 스트랩에서 오른쪽을 당겨 내가 원하는대로 아무 것도 작동하지 않는 것 같습니다.

부트 스트랩 열을 사용하여 자동으로 크기를 조정하려고했으나 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보다 낮은 모든 것이 지원되지 않을 것이라고 결정했습니다. –

고정 폭 float-right div 옆에있는 float-left div의 너비 자동 확장

답변

관련 문제