Question

如果A和C填充空间，我怎样才能使B成为固定的800px尺寸，所以它们都在一起触摸？ http://jsfiddle.net/8ufuV/

Answer 1

最简单的方法是使用display: table-cell。

请参阅： http://jsfiddle.net/47d4f/

这解决了您的问题，并且当每列中的内容不同时也会为您提供equal height columns - 这是简单无法获取的内容。

浏览器支持：http://caniuse.com/css-table

Answer 2

为您修复http://jsfiddle.net/8ufuV/17/ 你需要漂浮剩下的所有元素;然后具体宽度（这样做时不要忘记填充/边距）。在您想要显示在其下方的元素上，向其添加clear:left;。

祝你好运

Answer 3

HTML：

<div id="main">

<div id="leftblock">a</div>

<div id="contentblock">b</div>

<div id="rightblock">c</div>

</div>

CSS：

#main {
  display:table;
  width:100%
}

div {
  display: table-cell
}

#leftblock{
  top: 0px;
  left: 0px;
  margin: 0px;
  padding: 10px;
  border: 5px solid #ccc;
  voice-family: "\"}\"";
  voice-family:inherit;
}

#contentblock{
  padding: 10px;
  border: 5px solid #ccc;
  width: 100px;
}


#rightblock{
  top: 0px;
  right: 0px;
  margin: 0px;
  padding: 10px;
  border: 5px solid #ccc;
  voice-family: "\"}\"";
  voice-family:inherit;
}

3列，中心栏固定，侧面填充父母

3 个答案: