是否可以缩小浮动元素旁边的图像宽度（响应）？

Question

我正在尝试将现有设计转换为（某种程度上）响应式布局。 它的左上角有一个浮动的盒子（蓝色框），其余的内容应该浮动（文本和绿色框，表示图像）。

我正在寻找一种方法来调整图像的大小（绿色框），只要它在漂浮的蓝色框旁边，但是当被其他内容（lorem ipsum）推到它下面时返回到正常大小

我的正常方法是说max-width:100%，但由于蓝框，这不会在这里开始。 我已经有一个方法（fiddle，与下面的代码片段相同）使用包装div，它演示了所需的行为，但这意味着将每个内容图像包装在div中。

如果没有包装div，还有其他智能方法吗？

/* try varying the width of #wrap to see the effect */
#wrap {
  border:1px solid #aaa;
  min-height:200px;
  width:280px;
  background-color:#ddd;
  padding:10px;
}
#blue {
  width:150px;
  height:100px;
  border:1px solid #aaa;
  float:left;
  background-color:#ccccff;
  overflow:hidden;
  margin-right:10px;
}
#green {
  min-width:100px;
  min-height:30px;
  background-color:#ccffcc;
  border:1px solid #aaa;
  overflow:hidden;
  max-width:100%;
}
#green > img {
  width:100%;
}

<div id="wrap">
  <div id="blue"></div>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
  <div id="green"><img src="http://lorempixel.com/400/200/"/></div>
</div>

Answer 1

这是一种方法。

说明蓝色和绿色div的并排布局有效，直到您将视口缩小到800px。您可以使用CSS和媒体查询，如下所示：

/* set default sizes for #green and #blue  */ 

#green{
 width:A;
}  

#blue{
 width:B;
}  

/* on narrow viewports resize #green and #blue and stack them one over the other  */  
@media (max-width: 800px) {  

     #green{
       clear:left:  
       width: C;
     }  

    #blue{
    width:D;
   }

 } 

希望这有帮助！

Answer 2

试试这个：

<div id="wrap">
  <div id="blue"></div>  
  <div id="green"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p><img src="http://lorempixel.com/400/200/"/></div>
</div>