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。