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

您必须使用浮动来对齐左右框架。但为此你必须重新排序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 s的正确顺序必须首先浮动div，然后浮动div s。因此，我更正了代码（交换div d2和div d3。）

Answer 2

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

罢工，许多额外的div确保所有列的高度相等。 This may be what you're looking for.这篇优秀文章中解释了所有内容：http://www.alistapart.com/articles/holygrail

Answer 3

Div是一个块级元素，因此在显示属性的帮助下处理它是个不错的选择。

<div id="d1" style="display:inline-block; width:100px;">content1</div>
<div id="d2" style="display:inline">content2</div>
<div id="d3" style="display:inline-block; width:100px;">content3</div>

Answer 4

只需将其作为一个现代，干净的解决方案：使用calc。小提琴：http://jsfiddle.net/bg7KS/

#d2 {
    width: 200px; /* fallback older browsers */
    width: -webkit-calc(100% - 200px);
    width: -moz-calc(100% - 200px);
    width: calc(100% - 200px);
}

Answer 5

nvm这是旧的，我会发布对我有用的东西

    <style type="text/css">
#d1 {

  float: left;
  margin-left: 50px;

}

#d2 {
  float: center;
  margin-right: 5px;
}

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

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

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

5 个答案: