DIV-only两列CSS布局

Question

我正在修改当前使用两列设计表的布局，并遇到一些问题。

<div id="frame"> 

<div id="leftcol"> 
    <div id="1">blah</div> 
</div> 

<div id="leftcol"> 
    <div id="2">blah</div> 
    <div id="3">blah</div> 
</div> 

</div> 

#leftCol 
{ 
margin-right: 10px; 
width: 49%; 
float: left; 
} 

#rightCol 
{ 
width: 49%; 
float: left; 
} 

本来我有一个两列的表格与width=100% - 这个完美工作在Firefox，但在IE表溢出的#frame的div容器。我删除了这个表，并添加了两个浮动div，但我仍然有问题让列平等。

我的所有内容都位于div #frame的内部，它具有高度限制以及填充和边距（我用它在页面边缘留下“阴影线”）。

我需要两个浮动的DIV列是相同的宽度，并坐在一起，其间有一个10px（ish）的排水沟。我试着制作两个width: 50%，但是这样做失败了，因为它们所在的容器（#frame）比整个页面的宽度更小。 （如果我摆脱了填隙填充，它在FF中工作，但仍然不在IE中）。

使每列宽度：49％的作品，但看起来丑陋，因为浏览器之间的大小变化和右列不排队与#frame容器的边缘

我试过这样做，但最终返回到表9因为它似乎工作），但现在，我看到它与IE不兼容我一直在工作几个小时才能找到一个跨浏览器的css解决方案。有任何想法吗？

Answer 1

我想你可能会受益于像960gs或蓝图css这样的css框架，它允许绝对的网格放置，并且跨浏览器兼容开箱即用。

http://www.blueprintcss.org/

http://960.gs/

Answer 2

设置每列50％应该工作，如果你确保他们没有任何保证金或垫衬。

如果他们需要填充，请添加一个额外的包装div，它可以具有与必要的一样多的填充/边距。

对于中间的水沟，你可以给这些包装div divs左/右边的边框，使它看起来像一个列之间的空间。

发布一个完整的代码示例（例如在jsbin.com上）也可以帮助我们更容易地理解您的问题。 :)

Answer 3

如果您知道帧的宽度，可以do this

#frame { 
    background-color: green; 
    width: 500px; 
    overflow: auto; 
} 

#leftCol 
{ 
    width: 245px; 
    float: left; 
    background-color: red; 
} 

#rightCol 
{ 
    width: 245px; 
    float: right; 
    background-color: blue; 
} 

<div id="frame"> 

    <div id="leftCol"> 
    <div id="1">blah</div> 
    </div> 

    <div id="rightCol"> 
    <div id="2">blah</div> 
    <div id="3">blah</div> 
    </div> 

</div> 

否则，增加额外的DIV，和do this

<div id="frame"> 

    <div id="leftCol"> 
    <div id="hack"> 
     <div id="1">blah</div> 
    </div> 
    </div> 

    <div id="rightCol"> 
    <div id="2">blah</div> 
    <div id="3">blah</div> 
    </div> 

</div> 

#frame { 
    background-color: green; 
    width: 500px; 
    overflow: auto; 
} 

#leftCol 
{ 
    width: 50%; 
    float: left; 
} 

#hack { 
    margin-right: 10px; 
    background-color: red; 
} 

#rightCol 
{ 
    width: 50%; 
    float: right; 
    background-color: blue; 
} 

Answer 4

确定这里你去。这是如何实现的。

CSS

#leftCol, #rightCol{ 
    width: 48%; 
    float: left; 
    background: red; 
    box-sizing: border-box; 
} 

#leftCol{ 
    margin-right: 1%; 
} 

#rightCol{ 
    margin-left: 1%; 
} 

HTML

<div id="frame"> 

    <div id="leftcol"> 
     <div id="1">blah</div> 
    </div> 

    <div id="rightCol"> 
     <div id="2">blah</div> 
     <div id="3">blah</div> 
    </div> 

</div> 

如果你需要在这里是箱大小的供应商名称。

-moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 

请注意，您的HTML中存在拼写错误，因此两个div均被称为#leftCol。没有#rightCol。