css – 两个div,一个固定宽度,另一个,其余

前端之家收集整理的这篇文章主要介绍了css – 两个div,一个固定宽度,另一个,其余前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有两个div容器。

虽然需要一个特定的宽度,我需要调整,这样,其他div占用了剩余的空间。有什么办法可以做到吗?

  1. .left {
  2. float: left;
  3. width: 83%;
  4. display: table-cell;
  5. vertical-align: middle;
  6. min-height: 50px;
  7. margin-right: 10px;
  8. overflow: auto;
  9. }
  10.  
  11. .right {
  12. float: right;
  13. width: 16%;
  14. text-align: right;
  15. display: table-cell;
  16. vertical-align: middle;
  17. min-height: 50px;
  18. height: 100%;
  19. overflow: auto;
  20. }
  1. <div class="left"></div>
  2. <div class="right"></div> <!-- needs to be 250px -->

解决方法

参见: http://jsfiddle.net/SpSjL/(调整浏览器的宽度)

HTML:

  1. <div class="right"></div>
  2. <div class="left"></div>

CSS:

  1. .left {
  2. overflow: hidden;
  3. min-height: 50px;
  4. border: 2px dashed #f0f;
  5. }
  6.  
  7. .right {
  8. float: right;
  9. width: 250px;
  10. min-height: 50px;
  11. margin-left: 10px;
  12. border: 2px dashed #00f;
  13. }

你也可以使用display:table,这通常是一个更好的方法How can I put an input element on the same line as its label?

猜你在找的CSS相关文章