css - 移动 View HTML 中的重叠 div

Question

我正在尝试使用四个相同的 div 创建此设计，并在图像前添加一条垂直线。

现在他们看起来像

但是我面临着两个问题。

1. 我无法在图像前添加垂直线。
2. 当我在移动设备上打开这个 View 时，它们是重叠的。我怎样才能避免这种情况？

需要帮助!

这是我的代码。

                <div  style="border:2px solid #649fc0;padding-right:20px;padding:10px 40px;background:#C5DBE1;width: 350px;border-radius: 25px;"><img height="auto" width="20" src="images/Linux.png"/>Tool for linux is now avialble.</div>
                <br/>
                <div style="border:2px solid #649fc0;float:right;padding: 10px 40px; margin-top:-65px;background: #C5DBE1;width: 350px;border-radius: 25px;"><img height="auto" width="20" src="images/Windows.png"/>Tool for windows is coming soon.</div>
                <br/>
                <div style="border:2px solid #649fc0;padding:10px 40px;background:#C5DBE1;width: 350px;border-radius: 25px;"><img height="auto" width="18" src="images/android_logo_PNG17.png"/>Tool is now avialble for android.</div>
                <br/>
                <div style="border:2px solid #649fc0;float:right;padding: 10px 40px; margin-top:-65px;background:#C5DBE1;width: 350px;border-radius: 25px;"><img height="auto" width="20" src="images/apple.png"/>Tool for IOS is coming soon.</div>

Answer 1

对于您的 #2 问题，您可以为移动设备和其他屏幕分辨率编写 CSS 以使您的网站响应移动设备。