如何将3个div并排放置而不管长度如何？

Question

所以我想并排浮动三个div。现在，我将它们放在display: inline-block;并向左浮动，但当窗口太小时，最右边的<div>被迫低于其他两个。

另外我需要它，以便最右边和最左边的<div>具有一定的最大宽度，并且中心<div>应该改变它的宽度以填充窗口。 （如果任何解决方案干扰了这一点，我会给你这些信息）。我如何实现我的目标？

修改

此<div>的容器（无论是正文还是其他<div>）必须宽度为100％。我需要三个并排的<div>这样的位置：

这应该保持它的形式，因为我使窗口变小或变大。这是我现在拥有的HTML / CSS：

<div class="app-view">
  <div class="search-form"/>
  <div class="results-view"/>
  <div class="quick-viz"/>
</div>

.app-view-wrapper {
  display: inline-block;
  height: 100%;
}

.search-form {
  border-right: solid 1px #d1d2d4;
  display: inline-block;
  float: left;
  height: 100%;
  max-width: 300px;
  min-height: 900px;
  position: relative;
  width: 30%;
  background: #78787b;
}

.results-view {
  display: inline-block;
  height: 100%;
  padding-left: 10px;
  float: left;
  min-height: 900px;
  min-width: 200px;
  overflow-y: scroll;
  width: 55%;
}

.quick-viz {
  display: inline-block !important;
  position: relative;
  float: left;
  height: 100%;
  background: #78787b;
  overflow-x: scroll;
  margin-left: 10px;
}

Answer 1

更新了答案，完全遵循此结构（根据要求）：

使用容器：

<div class="container">
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
</div>

CSS

.a, .b, .c {
    float: left;
    height: 200px;
    width: 21%;
    margin: 2%
}
.b {
    width: 46%;
}
.container {
    width: 100%;
    overflow: hidden;
}

DEMO： http://jsfiddle.net/dQQhz/4/