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

Question

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

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

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

我如何解决这个问题？

#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 columns, middle one with flexible width

您可以通过将#right 移动到#left 之后或之前来改变它的行为；或通过在#middle 上设置溢出：隐藏。

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