CSS 3 DIV 连续 : 2 fix 1 auto adjust

Question

我想弄清楚如何创建 3 个 div 并将它们排列在同一行中。第一个和第三个固定宽度为 100px，第二个(中间)一个自动调整其宽度以防浏览器调整大小。

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

谢谢，

Answer 1

您已经使用 float 来对齐左右框架。但是为此，您必须如下所示对 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用于指出错误。 div 的正确顺序必须首先是 float div，然后是非 float div。因此我更正了代码(交换了 div d2 和 div d3)。