Html 3个div并排和移动兼容性

根据这段代码，我有3个div via

但我想让它们与移动设备兼容。我怎样才能做到这一点

潜水艇现在向左转，我在手机上看不到它们。我想让他们可见，当我在手机上，然后让他们1图标1行

<div style="width: 810px;">
 <div style="float: left; width: 270px;"><img src="images/icnrac.png" width=260/></div>
 <div style="float: left; width: 270px;"><img src="images/icnper.png" width=260/></div>
 <div style="float: left; width: 270px;"><img src="images/icnprf.png" width=260/></div>
 <br style="clear: left;" />
</div>

移除集装箱舱的宽度

从此处删除

宽度

<div style="width: 810px;">

使用jsFiddle或Codepen的演示将是perfectuse类而不是内联样式，然后您可以使用媒体查询来进行响应性更强的设计。解决方案非常简单，有时很难看到最简单的东西。

<div>
 <div style="float: left; width: 270px;"><img src="images/icnrac.png" width=260/></div>
 <div style="float: left; width: 270px;"><img src="images/icnper.png" width=260/></div>
 <div style="float: left; width: 270px;"><img src="images/icnprf.png" width=260/></div>
 <br style="clear: left;" />
</div>