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

我想弄清楚如何创建3个div并让他们在同一行中排列。第一个和第三个固定宽度为100px，第二个（中间）一个audo在浏览器调整大小的情况下调整其宽度。CSS连续3个DIV：2修正1自动调整

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

感谢，

来源

2010-03-03 Eatdoku

我*瘙痒*表明'<表式= '宽度：100％'>内容1内容2内容3'......但也许还有一种优雅的基于CSS的方式。我们拭目以待。 – 2010-03-03 23:55:54

有...见答案... :-) – AxelEckenberger 2010-03-03 23:59:28

~~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

来源

2010-03-03 23:56:02 ghoppe

呃 - 为什么当表格完美工作时，你会做一堆带有负边距和填充的CSS黑客？不负责任的。 – Wells 2011-04-18 01:06:37

@Wells因为使用表格进行布局更加不负责任。表格是表格数据。 – ghoppe 2011-04-18 07:35:21

你有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用于指出错误。 div的正确顺序必须先浮动div，然后非浮动div s。因此我更正了代码（交换了div d2和div d3）。

来源

2010-03-03 23:55:43 AxelEckenberger

不起作用：http://jsbin.com/ogigif/1/edit – 2013-04-30 21:10:47

@LenielMacaferi感谢您指出存在错误，现在更正的代码作品... http://jsbin.com/evagat/1/edit – AxelEckenberger 2013-05-01 08:08:25

很好！ :) ... – 2013-05-01 19:47:39

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>

来源

2011-11-03 07:06:10

在CSS中没有用于float的值'center'。（见http://www.w3schools.com/css/css_float.asp） – Rigganator 2014-12-05 18:05:49

事业部是一个块级元素，所以它是一个不错的选择与处理其显示属性的帮助。

<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>

来源

2012-08-14 10:43:01 himanshupareek66

只是把这个在那里作为一个现代化的，干净的解决方案：使用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); 
}

来源

2013-04-30 21:18:34

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

回答

相关问题