Автоматическое расширение ширины float-left div рядом с фиксированной шириной float-right div

В основном я имею два divs (div2 и div3) в содержащем div1. div2 плавает влево и div3 плавает права. Div3 является фиксированной шириной, а div2 должен авто-продлить до div3. Проблема, с которой я, похоже, сталкиваюсь, в то время как содержимое в div2 автоматически распространяется на 100% div2 (поле ввода), div2 сам не автоматически распространяется на div3; Я понятия не имею, почему он не работает так, как я ожидаю. В отличие от этого, если я устанавливаю div2 в ширину: 100% он заканчивает нажатие div2 вниз; это имеет смысл для меня, хотя.Автоматическое расширение ширины float-left div рядом с фиксированной шириной float-right 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-left div рядом с фиксированной шириной float-right div

ответ

Смежные вопросы