让子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>