2

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

我也需要它，以便最右边和最左边<div>有一定的最大宽度，并且中心<div>应该改变它的宽度以填充窗口。（我给你这个信息，以防任何解决方案干扰这个）。我如何实现我想要的？

编辑

这个容器<div>（无论是 body 还是另一个<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;
}
4

1 回答 1

4

更新的答案，完全遵循这个结构（根据要求）：

在此处输入图像描述

使用容器：

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

演示：http: //jsfiddle.net/dQQhz/4/

于 2013-09-09T18:38:19.560 回答