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