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