如何实现布局目标 - 两栏 [英] How to achieve layout goal - Two Column

问题描述

不要开始一场关于表格与css的大辩论 - 这里就是

我想要实现两列布局，你可以在这里看到：
http://jsfiddle.net/p5S5J/1/ （不按比例）

以下是我尝试让布局使用DIV
http://jsfiddle.net/xyt2r/1/

基本上，有没有办法让第二个DIV自动填充剩余空间在它的（固定宽度）父容器，而不必指定它的宽度？

更新

@thirtydot想出了这个（我编辑了位）： http://jsfiddle.net/thirtydot/xyt2r/5/
看起来溢出：隐藏在第二个DIV上保留边界。我必须仔细考虑这个问题，因为在Chrome中似乎有一些奇怪的保证金行为，我不相信这不是Voodoo。任何人都在意解释为什么/这是如何工作的？

解决方案

所以，我正在回答我的评论。我已经改进了CSS。

请参阅 http://jsfiddle.net/2WUgK/

我不相信这不是Voodoo然而

这可以在IE7 +和所有现代浏览器中使用。伏都教完全解释此处 ：）
$ b HTML：

  < div id =my-container> 
< div id =column-1class =layout>嗨！< / div> 
< div id =column-2class =layout> Hello< / div> 
< / div> 
  

CSS：

 ＃my-container {
 width：200px; 
 border：1px纯红色; 
 padding：6px 6px 6px 0; 
} 
＃column-1 {
 margin：0 6px; 
 padding：6px; 
 width：60px; 
 float：left; 
} 
＃column-2 {
 padding：6px; 
 overflow：hidden; 
} 
 .layout {
 border：1px纯蓝色; 
 height：120px; 
} 
  

Not to start a big debate about tables vs css - here goes

I have a two column layout I want to achieve as you can see here: http://jsfiddle.net/p5S5J/1/ (not to scale)

Here is my attempt at getting layout to work with DIVs http://jsfiddle.net/xyt2r/1/

Basically, is there a way to have that second DIV automatically fill up the rest of the space in it's (fixed width) parent container without having to specify a width for it?

UPDATE
@thirtydot came up with this (I edited a bit): http://jsfiddle.net/thirtydot/xyt2r/5/ It seems that overflow: hidden on the second DIV keeps the border. I'll have to look at this closer since there seems to be some weird margin action in Chrome and I'm not convinced this isn't Voodoo yet. Anyone care to explain why/how this works?

解决方案

So, I'm making a proper answer out of my comment. I've improved the CSS slightly.

See: http://jsfiddle.net/2WUgK/

I'm not convinced this isn't Voodoo yet

This will work in IE7+ and all modern browsers. The voodoo is thoroughly explained here :)

HTML:

<div id="my-container">
    <div id="column-1" class="layout">Hi!</div>
    <div id="column-2" class="layout">Hello</div>
</div>

CSS:

#my-container {
    width: 200px;
    border: 1px solid red;
    padding: 6px 6px 6px 0;
}
#column-1 {
    margin: 0 6px;
    padding: 6px;
    width: 60px;
    float: left;
}
#column-2 {
    padding: 6px;
    overflow: hidden;
}
.layout {
    border: 1px solid blue;
    height: 120px;
}

这篇关于如何实现布局目标 - 两栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！