html - 是否可以缩小 float 元素旁边图像的宽度(响应式)？

Question

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

我正在寻找一种方法来调整图像(绿色框)的大小，只要它在 float 的蓝色框旁边，但在被其他内容推到它下面时恢复正常大小(lorem ipsum) .

我通常的做法是说 max-width:100% 但由于蓝框的缘故，这不会在这里生效。 我已经有了使用包装 div 的方法( fiddle ，与下面的代码片段相同)，它演示了所需的行为，但这意味着将每个内容图像包装在一个 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 并排布局有效，直到您将视口(viewport)缩小到 800 像素。您可以像下面这样使用 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;
   }

 } 

希望这对您有所帮助!