css – 用左div填充剩余空间

前端之家收集整理的这篇文章主要介绍了css – 用左div填充剩余空间前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
任何人都可以告诉我如何使左div填充剩余的空间,而不修复正确的div大小.

我想要与以下示例完全相反:

  1. .left {float: left; border: 1px solid blue;}
  2. .right {overflow: hidden; border: 1px solid blue;}

正确的div应该只需要它所需的大小,左边的div应该占用所有剩余的空间.

解决方法

具有固定宽度的右侧div必须浮动:右侧;那么左边的div必须保持不变,所以它可以占用它的全部可用宽度,但是既然你想要修正正确的div,你必须先放置它.

HTML:

  1. <div id="parentDiv">
  2. <div id="rightFixedDiv"></div>
  3. <div id="leftDynamicDiv></div>
  4. </div>

CSS:

  1. #rightFixedDiv
  2. {
  3. float:right;
  4. border-style:solid;
  5. width:100px;
  6. height:200px;
  7. }
  8. #leftDynamicDiv
  9. {
  10. border-style:solid;
  11. background-color:blue;
  12. overflow:hidden;
  13. height:200px;
  14. }

检查出来,固定宽度为100px:http://jsfiddle.net/dkGbd/
固定宽度为200px:http://jsfiddle.net/eESTZ/

现在,如果你想要相反,先将左边的div放在第一位,给它一个浮点数:left;

工作范例:
http://jsfiddle.net/UShek/

猜你在找的CSS相关文章