我需要实现一个在尽可能多的浏览器中工作的响应表设计。最左边的两个单元格(左/中)将具有静态宽度,而我需要右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单元格,同时根据bowser的宽度调整大小?
最佳答案
我完全从头开始做的,看看对你有用吗
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>