自动宽度、百分比和固定宽度导致 DIV 换行

Question

我想要一个三列页面，其中中间的一个具有动态宽度（窗口调整大小）和一个最小宽度（div #middle: min-width:400px;< /代码>）。

问题是当我调整大小时第三列正在换行。

我知道如果我用 width:500px; 替换 #middle div width:75%; 这会起作用并且右列不会换行，但我不会不再有动态宽度的中间列...

我如何解决这个问题？

#contentwraper {
  position: relative;
  min-width: 800px;
}

#left {
  position: relative;
  float: left;
  background-image: url("http://www.artetics.com/images/artfrontpageslideshow.png");
  background-repeat: no-repeat;
  background-position: center center;
  min-width: 128px;
  width: 12%;
  height: 128px;
}

#middle {
  position: relative;
  float: left;
  min-width: 400px;
  width: 75%;
  text-align: center;
}

#right {
  position: relative;
  float: left;
  background-image: url("http://www.emoticonswallpapers.com/avatar/art/Test-Card.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  min-width: 128px;
  width: 12%;
  height: 128px;
}

.imagemiddle {
  position: relative;
  float: left;
  background-image: url("http://www.tradewindscientific.com/images/t_logo.gif");
  background-repeat: no-repeat;
  background-position: center center;
  width: 25%;
  height: 128px;
}

<div id="contentwraper">
  <div id="left"></div>
  <div id="middle">
    <div class="imagemiddle"></div>
    <div class="imagemiddle"></div>
    <div class="imagemiddle"></div>
    <div class="imagemiddle"></div>
  </div>
  <div id="right"></div>
</div>

Answer 1

如果您希望在页面太大（或者窗口不够）时右栏溢出到文档右侧，唯一的解决方案就是表格。

否则，请尝试以下操作：3 列，中间一列宽度灵活

可以通过将 #right 移动到 #left 之后或之前来更改它的行为；或者通过在#middle上设置overflow:hidden。

http://jsfiddle.net/3UAbN/1/