我需要在同一行上有4个等高但可变宽度的图像。当视口变小时,图像必须相应地调整大小并保持在同一行上。
因此,类似于以下内容:
这里应该使用哪种最佳的CSS?如果我使用
因此,类似于以下内容:
<div class="4images">
<img src="1.jpg"/>
<img src="2.jpg"/>
<img src="3.jpg"/>
<img src="4.jpg"/>
</div>
这里应该使用哪种最佳的CSS?如果我使用
.4images {
width:100%;
white-space: nowrap;
}
.4images img {
display:inline-block;
}
在大屏幕上我得到了期望的效果,但当我使用小设备时,最后一张图片会跑到下一行……我的想法是它们应该只是变小,仍然在同一行中。
请问有什么提示可以实现这个效果吗?