Question

我正在试图找出将两个固定宽度div连接到流体中心div的最佳方法。我一直在寻找这个问题的答案，但是大多数人都需要一个3列的布局来填充整个屏幕的宽度，而我希望任何一方都有可变数量的空白。

意图是流体div将环绕图像缩放到固定高度但宽度可变的图像。

理想情况下，如果屏幕的边缘到达，则两个固定的div不再进一步。这可以用纯css /框架完成，还是更容易使用javascript？如果它有帮助，我正在使用node.js服务器端。

现在我正在使用内联块作为一种使其工作的方法，但在使用百分比宽度时似乎有些错误。在页面刷新之前它没有正确调整大小，所以我希望有更好的方法。

Image: two fixed divs 'attached' either side of a fluid div

Answer 1

将包含液体和固定元素的div居中，然后float:left它们。

演示：http://jsfiddle.net/2utM4/4/

Answer 2

宽度来自哪里？ [edit]添加了offsetWidth。这是一个javascript方法 - 我包括一个等高的例程。它有最大宽度检查。代码已注释。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
*        { outline:1px dotted #000; } /* all things */
body     { padding:0; border:0; margin:0; }
#bodyid  { }
#header, #footer { background:#eee; clear:both; }
#middle3 { background:#fee; clear:both; margin:auto; }
#fixedl  { background:#efe; float:left; width:50px; }
#fluid1  { background:#eef; float:left; }
#fixedr  { background:#efe; float:left; width:50px; }
</style>
<script type="text/javascript">
function f1() { // process center 3 cols
  var wfluid1 = document.getElementById("fluid1").offsetWidth;
  var wfixedl = wfixedr = 50; // are fixed
  var wfluid1 = Math.min(wfluid1, screen.width - wfixedl - wfixedr); // max
  var wmiddle3 = wfixedl + wfluid1 + wfixedr;
  document.getElementById("middle3").style.width = wmiddle3 + "px";
  document.getElementById("fluid1").style.width = wfluid1 + "px";
  colsequal(new Array("fixedl", "fluid1", "fixedr")); // equal heights
  }
function colsequal(v1) { // makes column heights equal
  var h = document.getElementById(v1[0]).offsetHeight;
  for (i=1; i<v1.length; i++) { // get maximum height
    h = Math.max(h, document.getElementById(v1[i]).offsetHeight); }
  for (i=0; i<v1.length; i++) { // make all maximum
    document.getElementById(v1[i]).style.height = h + "px"; } 
  }
</script>
</head>
<body onload="f1();">
<div id="bodyid">
<div id="header">Header</div>
<div id="middle3">
<div id="fixedl">Fixed<br />1</div>
<div id="fluid1">Fluid<br />1<br />2<br />3</div>
<div id="fixedr">Fixed<br />1<br />2</div>
</div>
<div id="footer">Footer</div>
</div><!-- bodyid -->
</body>
</html>

'附加'div到流体内容的任一侧（图中...）

2 个答案: