我正在设计一个由3个部分组成的标题.
页面必须是流动的:最小宽度:940px;最大宽度:1200像素;
标题的前两部分将是固定大小:
- left middle right
- <---------><---------><----------------->
- 134px 183px (Fill the remaining space)
我希望根据页面的大小改变正确的部分,我将粘贴到目前为止,但我的问题是让它完全填补空白.
HTML:
- <div class="main">
- <div class="left"></div>
- <div class="middle"></div>
- <div class="right"></div>
CSS:
- .main{
- margin:auto;
- min-width:940px;
- max-width:1200px;
- background-color:#000;
- }
- .left{
- float: left;
- width: 134px;
- height: 191px;
- background-color:#0000ff;
- }
- .middle{
- float: left;
- width: 183px;
- height: 191px;
- background-color:#ffff00;
- }
- .right{
- float: left;
- width: 60%;
- height: 191px;
- background-color:#ff0000;
- }
解决方法
试试这个:
- <html>
- <head>
- <title>Three columns</title>
- <style type="text/css">
- div.main { background-color: #000; }
- div.left { float: left; width: 134px; height: 191px; background-color:#0000ff; }
- div.middle { float: left; width: 183px; height: 191px; background-color:#ffff00; }
- div.right { height: 191px; background-color: #ff0000; margin-left: 317px; }
- </style>
- </head>
- <body>
- <div class="main">
- <div class="left"></div>
- <div class="middle"></div>
- <div class="right"></div>
- </div>
- </body>
- </html>