时间戳

首页 > 解决方案 > 在android应用程序的webview中使用html定位图像粘贴的问题

android - 在android应用程序的webview中使用html定位图像粘贴的问题

问题描述

我在 html-css 中有以下代码：

<!DOCTYPE html>
<html>

<head>
    <meta name=viewport content=width=device-width, initial-scale=1>
    <style>
        .container {
            max-width: 100%;
            margin: auto;
        }

        img {
            max-width: 100%;
        }

        .inbox_msg {
            clear: both;
            overflow: hidden;
        }

        .recent_heading {
            float: left;
            width: 40%;
        }

        .incoming_msg_img {
            display: inline-block;
            width: 6%;
        }

        .received_msg {
            display: inline-block;
            padding: 0 0 0 1%;
            vertical-align: top;
            width: 92%;
        }

        .received_withd_msg p {
            background: #ebebeb none repeat scroll 0 0;
            border-radius: 1%;
            color: #646464;
            font-size: 14px;
            margin: 0;
            padding: 1% 1% 1% 2%;
            width: 100%;
        }

        .time_date {
            color: #747474;
            display: block;
            font-size: 12px;
            margin: 2% 0 0;
        }

        .received_withd_msg {
            width: 45%;
            margin: 1% 0 3%
        }

        .mesgs {
            float: left;
            padding: 1% 1% 0 2%;
            width: 100%;
        }

        .sent_msg p {
            background: #05728f none repeat scroll 0 0;
            font-size: 14px;
            margin: 0;
            color: #fff;
            padding: 1% 2% 1% 2%;
            width: 100%;
        }

        .outgoing_msg {
            overflow: hidden;
            margin: 1% 0 2%;
        }

        .sent_msg {
            float: right;
            width: 46%;
        }
    </style>
</head>

<body>
    <link href=//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css rel=stylesheet id=bootstrap-css>
    <script src=//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js></script>
    <script src=//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js></script>
    <!------ Include the above in your HEAD tag ---------->
    <html>

    <head>
        <link href=https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css type=text/css rel=stylesheet </head>

        <body>
            <div class=container>
                <div class=messaging>
                    <div class=inbox_msg>
                        <div class=mesgs>
                            <div class=incoming_msg>
                                <div class=incoming_msg_img> <img src='' alt=image> </div>
                                <div class=received_msg>
                                    <div class=received_withd_msg>
                                        <p>--------------</p> <span class=time_date>date</span> </div>
                                </div>
                            </div>
                            <div class=incoming_msg>
                                <div class=incoming_msg_img> <img src='' alt=image> </div>
                                <div class=received_msg>
                                    <div class=received_withd_msg>
                                        <p>--------------</p> <span class=time_date>date</span> </div>
                                </div>
                            </div>
                            <div class=incoming_msg>
                                <div class=incoming_msg_img> <img src='' lt=image> </div>
                                <div class=received_msg>
                                    <div class=received_withd_msg>
                                        <p>--------------</p> <span class=time_date>date</span> </div>
                                </div>
                            </div>
                            <div class=incoming_msg>
                                <div class=incoming_msg_img> <img src='' alt=image> </div>
                                <div class=received_msg>
                                    <div class=received_withd_msg>
                                        <p>--------------</p> <span class=time_date>date</span> </div>
                                </div>
                            </div>
                            <div class=outgoing_msg>
                                <div class=sent_msg>
                                    <p>--------------</p> <span class=time_date>date</span> </div>
                            </div>
                            <div class=outgoing_msg>
                                <div class=sent_msg>
                                    <p>--------------</p> <span class=time_date>date</span> </div>
                            </div>
                            <div class=incoming_msg>
                                <div class=incoming_msg_img> <img src='' alt=image> </div>
                                <div class=received_msg>
                                    <div class=received_withd_msg>
                                        <p>--------------</p> <span class=time_date>date</span> </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </body>

    </html>
</body>

</html>

上面代码的结果是图片在消息的左边：

电脑截图

在我的 android 上，图片显示在消息上方：

安卓智能手机截图

我不得不说 html 显示在我的移动应用程序的 Webview 中。所以问题是我希望图像显示在我的android应用程序的消息左侧。我必须在 css 中改变什么？

标签： androidhtmlcsswebview

解决方案

这是响应式的。在移动设备和台式机上都可以正常工作。请检查一下。

<!DOCTYPE html>
<html>

<head>
    <meta name=viewport content=width=device-width, initial-scale=1>
</head>

<body>
    <link href=//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css rel=stylesheet id=bootstrap-css>
    <script src=//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js></script>
    <script src=//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js></script>
    <!------ Include the above in your HEAD tag ---------->
    <html>

    <head>
      <link href=https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css type=text/css rel=stylesheet </head>

      <div class=container>
        <div class="row">
          <div class=" col-6 com-sm-6 col-md-6">
            <img src='' alt=image/> 
          </div>
          <div class="col-6 com-sm-6 col-md-6">
              <span>--------------</span> <span >date</span>
          </div>
      </div>
      <div class="row">
          <div class=" col-6 com-sm-6 col-md-6">
            <img src='' alt=image/> 
          </div>
          <div class="col-6 com-sm-6 col-md-6">
              <span>--------------</span> <span >date</span>
          </div>
      </div>

    </html>
</body>

</html>

推荐阅读