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

你可以通过在#left之后或之前移动来改变＃right的行为;或者通过设置溢出：隐藏在#middle。

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

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

1 个答案: