奇怪的三個div並排

我是一個桌子的傢伙，但我需要拖放一些div，所以我嘗試了這樣做tabirless（正確的方式）。奇怪的三個div並排

這就是我想做的事： Design

所有元素之間的空間應該是24px的。我的主要問題是讓div（1,2,3）佔用100％的可用空間。寬度：100％將它們發送到主容器之外。

這是到目前爲止我的代碼：

HTML

<div id="mainContainer"> 
<div id="topContainer">Just the top one 
</div> 
<div id="table"> 
    <div id="Line1Container"> 
    <div id="container1" class="container">1 
    </div> 
    <div id="container2" class="container">2 
    </div> 
    <div id="container3" class="container">3 
    </div> 
</div> 
<div id="Line2Container"> 
    <div id="container4" class="container">4 
    </div> 
    <div id="container5" class="container">5 
    </div> 
    <div id="container6" class="container">6 
    </div> 
</div> 
</div> 
</div>

而且我的CSS

#mainContainer { 
    border: 1px solid lightgray; 
    position:fixed; 
    top: 80px; 
    bottom:20px; 
    left:80px; 
    right:80px; 
    overflow-y: scroll; 
    overflow-x: hidden; 
    border-top-left-radius: 10px; 
    border-bottom-left-radius: 10px; 
} 

#topContainer { 
    border: 1px solid lightgray; 
    border-radius: 10px; 
    margin-left: 24px; 
    margin-right: 24px; 
    margin-top: 24px; 
} 

#table { 
    display: table; 
    margin: 24px; 
    width: 95%; 
} 

#Line1Container, #Line2Container { 
    display: table-row; 
} 

.container { 
    border: 1px solid lightgray; 
    display: table-cell; 
    width: 33%; 
    border-radius: 10px; 
}

正如你看到的我試過表細胞的方法，但我已經試過之前浮動：左邊的方法。

感謝

來源

2013-05-03 tcardoso

如何使用表格分隔div？

http://jsfiddle.net/5zfEq/

補充：

#Line1Container { 
    padding:12px; 
} 
#inner-table { 
    width: 100%; 
} 
#inner-table td { 
    padding: 12px; 
}

基於@Edifice小提琴....感謝與TD填充這樣總會有他們之間

看看這個小提琴被24PX ;）

來源

2013-05-04 11:02:24 David

我還沒用過'display：table;'？ – David 2013-05-04 11:09:45

啊，我以爲你只是給OP的原始代碼添加了一些東西。但從問題中可以明顯看出，他們正試圖避免使用表格進行佈局。 – 2013-05-04 11:11:38

哎呀！你的權利，對不起，在jsfiddle領域被帶走了！：s – David 2013-05-04 11:16:54

Fiddle

不能正確連同動態大小使用px值與%值。您應該使用x％而不是24px。你可以在「單元格」上使用float: left

來源

2013-05-03 16:03:38 seniorpreacher

並且您不需要爲錶行設置'tr'元素（這裏是LineXContainer），因爲如果單元格不適合放在一行中，它將跳轉到下一個l國家統計局。 – seniorpreacher 2013-05-03 16:06:51

我唯一的問題是設計人員在PDF規範上有24像素尺寸。但感謝解決方案。 – tcardoso 2013-05-04 15:32:20

也應該爲單元格使用'px'值。看看[Twitter的Bootstrap]（http://twitter.github.io/bootstrap/）。他們有一個響應式網格系統，如果您調整窗口大小，會改變寬度，但您可以使用精確的單元格。 – seniorpreacher 2013-05-05 08:43:23

奇怪的三個div並排

回答

相關問題