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

我是从头开始做的，看看它对你有用吗</ p>

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>

Answer 2

不要浮动.right元素，并为其赋予与.leftWrapper

相同宽度的边距

这就是漂浮物的美丽......

更新演示 http://jsfiddle.net/mmZeN/2/

Answer 3

如果您有左侧和中间的静态值，您可以指定使用css并让其他列为百分比值。这应该适用于这种情况。

更新：获取当前占位符（可能是DIV）的px，扣除左列和中间列宽，然后保持宽度ex：Xpx Xpx /容器总宽度x 100 您可以按百分比给出这个值。

具有静态列的响应表布局？

3 个答案: