html – CSS 3列浮动(2个固定,1个动态)

前端之家收集整理的这篇文章主要介绍了html – CSS 3列浮动(2个固定,1个动态)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在设计一个由3个部分组成的标题.

页面必须是流动的:最小宽度:940px;最大宽度:1200像素;

标题的前两部分将是固定大小:

  1. left middle right
  2. <---------><---------><----------------->
  3. 134px 183px (Fill the remaining space)

我希望根据页面的大小改变正确的部分,我将粘贴到目前为止,但我的问题是让它完全填补空白.

HTML:

  1. <div class="main">
  2.  
  3. <div class="left"></div>
  4. <div class="middle"></div>
  5. <div class="right"></div>

CSS:

  1. .main{
  2. margin:auto;
  3. min-width:940px;
  4. max-width:1200px;
  5. background-color:#000;
  6. }
  7.  
  8. .left{
  9. float: left;
  10. width: 134px;
  11. height: 191px;
  12. background-color:#0000ff;
  13. }
  14. .middle{
  15. float: left;
  16. width: 183px;
  17. height: 191px;
  18. background-color:#ffff00;
  19. }
  20.  
  21. .right{
  22. float: left;
  23. width: 60%;
  24. height: 191px;
  25. background-color:#ff0000;
  26. }

解决方法

试试这个:
  1. <html>
  2. <head>
  3. <title>Three columns</title>
  4. <style type="text/css">
  5. div.main { background-color: #000; }
  6. div.left { float: left; width: 134px; height: 191px; background-color:#0000ff; }
  7. div.middle { float: left; width: 183px; height: 191px; background-color:#ffff00; }
  8. div.right { height: 191px; background-color: #ff0000; margin-left: 317px; }
  9. </style>
  10. </head>
  11. <body>
  12. <div class="main">
  13. <div class="left"></div>
  14. <div class="middle"></div>
  15. <div class="right"></div>
  16. </div>
  17. </body>
  18. </html>

猜你在找的HTML相关文章