在固定宽度的浮动右侧 div 旁边自动扩展浮动左侧 div 的宽度答案

【问题标题】：Auto extending width of float-left div next to a fixed-width float-right div在固定宽度的浮动右侧 div 旁边自动扩展浮动左侧 div 的宽度
【发布时间】：2014-06-25 00:00:25
【问题描述】：

我基本上在一个包含 div1 中有两个 div（div2 和 div3）。 div2 向左浮动， div3 向右浮动。 div3 是固定宽度，而 div2 应该自动扩展到 div3。我似乎遇到的问题是，虽然 div2 auto 中的内容扩展到 div2（输入框）的 100%，但 div2 本身不会自动扩展到 div3；我不知道为什么它没有按我预期的方式工作。相反，如果我将 div2 设置为 width:100% ，它最终会将 div2 向下推；不过这对我来说很有意义。

我希望是这样的：

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

我一直在努力解决这个问题，在引导程序中尝试 float:right、float:left、clear:right、pull-left、pull-right，但似乎没有任何效果。

我打算使用引导列自动调整大小，但要求是 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>

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

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)。

【讨论】：

这真的很酷，谢谢！这是一款新应用，因此团队决定不支持任何低于 IE9 的应用。