如何制作两个div，并排浮动，在一个范围内调整大小，第二个按需要下降

I have two divs side by side. The first is fixed width with an image. The second is variable width with text (variable over a range 150-770). I need the second div to resize on browser resize so that it can shrink from 750 to 150, the text inside will wrap during resize, and the divs stay side by side down to 300+150. However, when the browser goes below 300+150 in width, the second div will drop down under the first. After hours of chasing my own tail with css, I can achieve some of that, but not all of it at once (e.g. I can do all of that but not get the second div to drop down or I can get it all except the text won't word wrap between size 150 and 750). Thanks.

我有两个女主角并排在一起。第一个是固定宽度和一个图像。第二个是变量宽度和文本(变量在150-770之间)。我需要第二个div来调整浏览器的大小，这样它就可以从750缩小到150，里面的文本会在调整大小的时候被包装起来，div会并排缩小到300+150。但是，当浏览器的宽度低于300+150时，第二个div会在第一个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>

2 个解决方案

#1

You should use @media css queries to make it responsive.

您应该使用@media css查询来使其响应。

This link: http://css-tricks.com/logic-in-media-queries/ may help to explain @media queries.

这个链接:http://css-魔术师s.com/logicin -media-queries/可能有助于解释@media查询。

What you want to do is make each 100% width at mobile size.

你要做的是使每个100%宽度移动尺寸。

#2

If you resize the page the div will resize with it and on load of the page.

如果调整页面大小，div将使用它调整页面大小，并加载页面。

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

and to make them float next to each other try this css:

为了让它们互相浮动试试这个css:

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

#1