让子div伸展到具有可变宽度的父div的剩余宽度

Question

我尝试搜索我遇到的这个问题，但我找不到任何解决方案。所以目前这就是我所在的地方：

<div style="min-width:800px; max-width:1280px;">
    <img style="width:300px; height:300px; display:block; float:left;"/>
    <div style="float:left;">
    </div>
</div>

这就是我想要实现的目标：

目前，带有文字的div只是在图像的正下方弹出，这就是它应该做的事情。我只是不知道如何得到我想要它。我一直试图避免桌子展示......

无论如何，提前谢谢。

Answer 1

使用定位！

<div style="min-width:800px; max-width:1280px; position: relative; padding-left: 305px;">
    <img style="width:300px; height:300px; display:block; position: absolute; top: 0px; left: 0px;"/>
    <div style="background: white;">

    </div>
</div>

截图：

小提琴：http://jsfiddle.net/dsRVc/

---

更长的文字预览

小提琴：http://jsfiddle.net/dsRVc/1/

Answer 2

你也可以试试这个：

<div style="min-width:800px; max-width:1280px; position:relative;">
    <img style="width:300px; height:300px; display:block; float:left; position:absolute; top:0; left:0;"/>
    <div style="margin-left:300px;">
        <!-- Now this content will grow as much as it can without disturbing the column of the image -->
    </div>
</div>