Question

我有两个div并排。第一个是带图像的固定宽度。第二个是带文本的可变宽度（变量范围为150-770）。我需要第二个div在浏览器调整大小时调整大小，以便它可以从750缩小到150，内部文本将在调整大小期间换行，并且divs并排下降到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());
});

并让它们彼此相邻，试试这个css：

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

Answer 2

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

此链接：http://css-tricks.com/logic-in-media-queries/可能有助于解释@media查询。

您要做的是使每个移动尺寸的宽度均为100％。

如何制作两个div，并排浮动，在一定范围内响应调整，第二个根据需要下降

2 个答案: