html - 如何制作两个 div，并排 float ，在一个范围内响应地调整大小，第二个根据需要下降

Question

我有两个并排的 div。第一个是带有图像的固定宽度。第二个是可变宽度的文本(在 150-770 范围内可变)。我需要第二个 div 在浏览器调整大小时调整大小，以便它可以从 750 缩小到 150，里面的文本将在调整大小时换行，并且 div 并排保持到 300+150。但是，当浏览器的宽度低于 300+150 时，第二个 div 将下降到第一个下方。在用 css 追逐自己的尾部几个小时后，我可以实现其中的一些，但不是一次全部实现(例如，我可以完成所有这些，但不能让第二个 div 下拉，或者我可以得到除文本之外的所有内容不会在大小 150 和 750 之间自动换行)。谢谢。

<div>
    <div style="float:left; width: 300px; ">
        <img src="image.jpg" style="width: 100%;">
    </div>

    <div style="float:left; min-width:150px; max-width: 750px;">
        some text here that should wrap on resize between 300 and 750.
        if the browser window get below 300+150, this div will
        drop below the previous div.
    </div>

    <div style="clear: both;"></div>
</div>

Answer 1

如果您调整页面大小，div 将随之调整大小并加载页面。

$(window).on('load resize', function(){
    $('#div').width($(this).width());
});

并让它们并排 float ，试试这个 css:

display: inline;
  postion: relative;
  float: left;