CSS 3 DIV连续:2修复1自动调整

Question

我试图找出如何创建3个div并让他们在同一行中的阵容.将第一个和第三个固定宽度设置为100px并使第二个(中间)一个audo调整其宽度以防浏览器调整大小.

<div>
   <div id="d1"> content 1</div>
   <div id="d2"> content 2</div>
   <div id="d3"> content 3</div>
</div>

谢谢,

Answer 1

你有tp使用浮动来对齐左右框架.但为此你必须重新排序div,如下所示,并设置中间div的边距.

<style type="text/css">
#d1 {
  float: left;
}

#d2 {
  float: right;
}

#d3 {
  margin-left: 100px;
  margin-right: 100px;
}
</style>

<div>
   <div id="d1"> content 1</div>
   <div id="d2"> content 2</div>
   <div id="d3"> content 3</div>
</div>

编辑

感谢Leniel Macaferi指出错误.divs 的正确顺序必须先浮动div,然后浮动divs.因此我更正了代码(交换了divd2和divd3).

Answer 2

http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm

强调一下，许多额外的 div 以确保所有列的高度相等。这可能就是您正在寻找的。所有这些都在这篇优秀的文章中进行了解释：http://www.alistapart.com/articles/holygrail