html - 具有静态列的响应式表格布局？

Question

我需要实现一个可在尽可能多的浏览器中运行的响应式表格设计。最左边的两个单元格(左/中)将具有静态宽度，而我需要右侧的 div 具有基于当前窗口大小的动态宽度。

这是标记的样子:

<div class="wrapper">
    <div class="leftWrapper">
        <div class="left">left</div>
        <div class="mid">mid</div>
    </div>
    <div class="right">Lorem ipsum dolor sit amet, facilisi velit justo non. Pretium vestibulum nibh nonummy et a libero. Aptent consequat suscipit ridiculus leo pellentesque tempus, suspendisse pretium quis turpis. Euismod facilisi congue ab. Pretium ultricies non aliquam mi, cras sint, pede elit ligula aliquam in scelerisque ultricies, vitae dictum tincidunt sit, torquent eu et eros suspendisse. Voluptate nec curabitur et at nam non, diam vel, lorem nibh id condimentum a, laborum ornare, pede sem mattis. Numquam magna non metus sit fringilla, ligula quis cras, in lorem, praesent eros volutpat nisl vehicula tellus, egestas nullam. Pede aliquam donec.</div>
</div>

http://jsfiddle.net/mmZeN/ .

如何在不使用 display: table-cell 的情况下让右侧单元格与左侧单元格和中间单元格保持在同一行，同时根据 bowser 的宽度调整其大小？

Answer 1

这是我从零开始做的，看看对你有没有用

Demo

<div class="wrapper">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>

<style>
.left {
    float: left; 
    width: 200px; 
    background-color:#0f0;
    min-height: 200px;
}

.center { 
    float: left; 
    width: 120px;  
    background-color:#000;
    min-height: 200px;
}
.right { 
    height: 200px; 
    background-color: #f0f; 
    margin-left: 320px; 
}
</style>