Проблема в позиционировании вставки изображения с html в веб-просмотре в приложении android - PullRequest
0 голосов
/ 28 февраля 2020

У меня есть следующий код в 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>   

В результате выполнения кода выше изображение слева от сообщения:

PC screenshot

На моем android картинка поверх сообщения:

Android smartphone screenshot

У меня есть сказать, что html отображается в Webview в моем мобильном приложении. Итак, проблема в том, что я хочу, чтобы изображение отображалось слева от сообщения в моем приложении android. Что я должен изменить в css?

1 Ответ

1 голос
/ 28 февраля 2020

Это отзывчиво. отлично работает как в мобильном, так и в настольном режиме. Пожалуйста, проверьте это.

<!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>   
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...