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

我试图将现有设计转换为（有点）响应式布局。它左上角有一个浮动框（蓝色框），其余内容应该浮动（文本框和绿色框，代表图像）。是否可以缩小浮动元素旁边图像的宽度（响应）？

我正在寻找一种方式来调整图像（绿框）的大小，只要它是浮动的蓝色框旁边，但恢复到正常大小被推它下面通过时，其他内容（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>

来源

2016-11-17 z00l

这里有一个方法。

说出你的蓝色和绿色divs的并排布局，直到你减少你的视口为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; 
    } 

}

希望这有助于！

来源

2016-11-17 19:16:01

这比一个负责任的做法自适应，并且我希望是找到一个真正响应的解决方案。我会看看我能否找到妥协的妥协方案，但我不会将此标记为现在的答案。感谢这个想法。 – z00l

Hi @ z00l，根据您设计的细节和页面上的元素，这个建议的选项可能是使用float：left;而不是清除媒体查询中的#green div，而不是使用#green和#blue的固定像素宽度，使用像％或vw这样的相对尺寸。 –

-1

试试这个：

<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>

来源

2016-11-17 19:21:22 Vel

不是我的问题的解决方案。这会导致将文本部分移动到蓝框下方，这不是一个选项。感谢您的输入。 – z00l

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

回答

相关问题