一个div内含三个div,内部三个div向左浮动,最后一个自适应大小

在页面body里有一main层div,里面有三块div:left,Middle,right;全部向左浮动,最左边两个left,Middle,固定宽度,让最后一个div自适应剩余的空间,理想图如图:图片说明
而我现实出现成这样,如图最右边的只有一小块,不知道怎么设置成充满,而且,由于屏幕的分辨率会变,最右边的还容易跑到最下边去,如图:图片说明
求各位大神指导....

8个回答

最好写百分比......这样最起码不会出现小屏的时候,第三个div掉到第二行。还有就是最右边的div里面的元素100%,就不会出现外框大,内框只有一小块的情况了。

可以用jQuery计算吗?

可以用jQuery计算然后赋予第三个div宽度。

$(window).resize(function(){layout(); }).resize();

var widthW = $(window).width();

你要用js动态计算右边的宽度罗。。要么就是用百分比

 <doctype html>
<style>
    .div1,.div2{float:left;width:15%;}
    .div3{float:right;width:70%}
</style>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>

推荐去前端之路上看看,有专门的文章和实例,之前我也遇到过


    .right {
        background-color:green;
    }
    .left, .middle {
        float:left;
        width:200px;
        height:100px;
    }
    .left {
        background-color:blue;
    }
    .middle {
        background-color:red;
    }
    .cf {
        clear:both;
    }
left
middle
right
 <style>
    .right {
        background-color:green;
    }
    .left, .middle {
        float:left;
        width:200px;
        height:100px;
    }
    .left {
        background-color:blue;
    }
    .middle {
        background-color:red;
    }
    .cf {
        clear:both;
    }
</style>
<div class="right">
    <div class="left">left</div>
    <div class="middle">middle</div>
    right
    <div class="cf"></div>
</div>
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!