css浮动

问题在代码中！ <div style="width:800px;height:200px;border:1px #dcdcdc solid">
父div为div3
<div style="width:200px;height:200px;background:red;float:left">div1</div>
<div style="height:200px;background:yellow;float:left;width:300px;">div2</div>
</div>
<div>
<p>已知：div1的宽度。div3的宽度是画的时候才知道（相当于未知）。div2宽度未知。</p>
<p>1，希望达到效果为div1和div2能够在一行显示，并使div2能够宽度最大。定位效果随意，无论 float还是position，只要达到效果就行。</p>
<p>2，希望CSS实现！</p>
</div>

解决方案 »

  1.   

    就像table的第二个td自适应宽度一样～
      

  2.   

    <script>
    function Resize(){
    var tmpW
    //alert(document.getElementById("div3").scrollWidth);
    //alert(document.getElementById("div1").style.width);
    tmpW=document.getElementById("div3").scrollWidth-parseInt(document.getElementById("div1").style.width);
    //alert(tmpW);
    document.getElementById("div2").style.width=tmpW+"px";
    //alert(document.getElementById("div2").style.width);
    }
    </script>
    </head><body onload="Resize();">
    <div id="div3" style="width:800px;height:200px;border:1px #dcdcdc solid">
    父div为div3
    <div id="div1" style="width:200px;height:200px;background:red;float:left">div1</div>
    <div id="div2" style="height:200px;background:yellow;float:left;width:300px;">div2</div>    
    </div>
    <div>
        <p>已知：div1的宽度。div3的宽度是画的时候才知道（相当于未知）。div2宽度未知。</p>
        <p>1，希望达到效果为div1和div2能够在一行显示，并使div2能够宽度最大。定位效果随意，无论 float还是position，只要达到效果就行。</p>
        <p>2，希望CSS实现！</p>
    </div>
    </body>
      

  3.   


    <div style="width:800px;height:200px;border:1px #dcdcdc solid">
            父div为div3
    <div>
            <div style="width:200px;height:200px;background:red;float:left">div1</div>
            <div style="height:200px;background:yellow;margin-left:200px;">div2</div>  
    </div>
        </div>
        <div>
        <p>已知：div1的宽度。div3的宽度是画的时候才知道（相当于未知）。div2宽度未知。</p>
        <p>1，希望达到效果为div1和div2能够在一行显示，并使div2能够宽度最大。定位效果随意，无论 float还是position，只要达到效果就行。</p>
        <p>2，希望CSS实现！</p>
        </div>
    调整div3宽度，可以看到div2自适应. 不知道是不是你要的效果