2

我需要实现一个在尽可能多的浏览器中工作的响应式表格设计。最左边的两个单元格（左/中）将具有静态宽度，而我需要右 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 的宽度调整大小？

4

3 回答 3

2

我是从头开始做的，看看对你有用吗

演示

<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>
于 2013-04-23T12:05:41.873 回答
1

不要浮动.right元素并给它一个与元素宽度相同的边距.leftWrapper

这就是花车的魅力。。

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

于 2013-04-23T12:09:11.333 回答
0

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

更新：获取当前占位符的 px（可能是 DIV），减去左侧和中间列的宽度，然后保持宽度例如：Xpx Xpx/容器的总宽度 x 100 这个值你可以作为百分比给出。

于 2013-04-23T12:03:22.207 回答