Question

我在包含div1中基本上有两个div（div2和div3）。 div2浮动左，div3浮动权限。 Div3是固定宽度，而div2 应自动扩展到div3。我似乎遇到的问题是，当div2 auto中的内容扩展到div2的100％（输入框）时，div2本身不会自动扩展到div3;我不知道为什么它没有像我期望的那样工作。相反，如果我将div2设置为宽度：100％则最终将div2向下推;这对我来说很有意义。

我期待这样的事情：

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

Answer 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）不起作用。

自动扩展float-left div的宽度，旁边是固定宽度的float-right div

1 个答案: