我基本上在包含div1中有两个div（div2和div3）。 div2向左浮动，而div3向右浮动。 Div3是固定宽度，而div2应该自动扩展到div3。我似乎遇到的问题是，虽然div2 auto中的内容扩展到div2（输入框）的100％，但div2本身不会自动扩展到div3；我不知道为什么它没有按我期望的方式工作。相反，如果我将div2设置为width：100％，则最终会将div2向下推；这对我来说很有意义。
我期望这样的事情：
------------div1--------------
[--------div2----------][div3]
-----------/div1--------------
我一直为此努力，尝试在floatstrap中使用float：right，float：left，clear：right，pull-left，pull-right，但似乎没有任何工作如我所愿。
我打算使用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>
最佳答案
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）中，这被归类为“实验性”。
关于html - 固定宽度的右 float div旁边的左 float div的自动扩展宽度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24391167/