並排固定大小的塊和響應塊？

我想用一行和兩個單元製作一個900px寬的居中表格。我希望正確的單元格總是200px寬，左邊的單元格應該填充剩下的部分，但是當我使瀏覽器窗口更小時，右邊單元格在左邊單元格下跳轉。（當兩個單元格都有百分比時，它可以正常工作，但正確的單元格/塊需要200px）？並排固定大小的塊和響應塊？

我的HTML：

<table class="sitecontent"> 
    <tr> 
    <td class="boxed"> contents </td> 
    <td class="infobar"> contents </td> 
    </tr> 
</table>

我的CSS：

.sitecontent { 
    max-width:900px; 
    margin: 0 auto; 
    display: table; 
    height: 100%; 
} 

.boxed { 
    max-width:75%; 
    float: left;  
} 

.infobar { 
    float: left; 
    width: 200px; 
    border: 1px solid rgb(240,240,240); 
    overflow: auto; 
    max-height: 100%; 
}

應該不是最大寬度使「盒裝」低於75％的寬度，使內容適合當表寬度低於900px？

我試過用div而不是表格，但結果是一樣的嗎？

來源

2014-10-02 Kennet Leth Sørensen

你爲什麼浮動表格單元格？ – 2014-10-02 23:12:13

這是從嘗試與div而不是表格對齊時剩下的代碼。 – 2014-10-02 23:39:31

如果你想在其他細胞填寫，您可以使用一個功能空間的其餘部分被稱爲鈣（）

這可以讓你決定使用基本的添加和使用百分比和固定單位的大小減法。

計算值（）的廣泛支持看到http://caniuse.com/#feat=calc

一個很好的基準是http://css-tricks.com/a-couple-of-use-cases-for-calc/

在下面的例子中，我有

.boxed { 
    max-width:calc(100% - 200px); 
}

http://jsfiddle.net/AuroraArcade/42g5mw80/2/

爲了使信息欄200像素你可以在元素上使用box-sizing：border-box，或者你可以調整inn呃寬度，或者你可以刪除邊框和間距。

一個例子

.infobar { 
    width: 200px; 
    box-sizing: border-box; 
    border: 1px solid rgb(240,240,240); 
    overflow: auto; 
    max-height: 100%; 
}

來源

2014-10-02 22:58:32

並排固定大小的塊和響應塊？

回答

相關問題