имя и сообщение вверх и вниз и выровнены со значком

Question

Я знаю, что название звучит очень странно, но позвольте мне показать, что я пытаюсь достичь. Это картина того, что я пытаюсь сделать.

И это то, что я получаю в качестве вывода моего кода

Как Вы можете видеть на изображении № 1 имя «RomEio» и текст ниже, встроенный в значок, но в моем случае этого не происходит ..

 

#onio_showmsg_div {
    width: 100%;
    height: 90%;
}
#onio_showmsg_div > #showmsg_div1 {
    width: 100%;
    float: left;
    border: 1px solid rgba(10, 10, 10, 0.1);
    border-right: none;
    border-left: none;
}
#msg_user {
    font-size: 12px;
}
#onio_user_2 {
    border-radius: 100%;
    height: 40px;
}

 <div id="onio_showmsg_div">
                <div id="showmsg_div1">
                    <img src="images/user.jpg" id="onio_user_2"  style="border: 2px solid lightblue">
                    <div style="display: inline-block;">
                        <p>BaTuTa</p>
                        <span style="margin: 0px;padding:0px;">Na</span>
                    </div>
                </div>                      
            </div>

Answer 1

У вас может быть слишком много div, это может быть выполнено намного проще:

#onio_showmsg_div {
    width: 100%;
    height: 90%;
    overflow:hidden;
}
#onio_showmsg_div img {
    float: left;
}
.content {
    font-size: 12px;
    float:left;
    margin: 0 0 0 10px;
}

.content p
{
margin:0 0 5px 0;
padding: 0;
}

<div id="onio_showmsg_div">
  <img src="images/user.jpg" id="onio_user_2"  style="border: 2px solid lightblue">
    <div class="content">
        <p>BaTuTa</p>
        <p><span>Na</span></p>
    </div>                      
</div>

У меня есть перемещение img из всплывающего контейнера, и теперь оно всплывает влево. Контейнер (content) используется для хранения вашего текстового содержимого, а также для его явного перемещения влево. overflow:hidden на главной оболочке - это что-то вроде взлома поплавков, который содержит поплавки.

Глядя на другие ответы, возможно, было бы целесообразно узнать о сетке и flexbox. Поскольку мой ответ немного старомоден (с использованием поплавков), но поскольку ваш первоначальный вопрос использует поплавки, я тоже.

Answer 2

используйте flexbox для такого рода вещей:

#showmsg_div1 {
    display:flex;
    align-items:center;
}
#msg_user {
    font-size: 6px;
}


#f2{
display:flex;
flex-direction:column;
justify-content:center;
}

p{
margin:0;
padding:0;
}

<div id="showmsg_div1">
    <img src="images/user.jpg" id="onio_user_2"  style="border: 2px solid lightblue">
    <div id='f2'style="display: inline-block;">
      <p>BaTuTa</p>
      <span style="margin: 0px;padding:0px;">Na</span>
    </div>
</div>                      

Answer 3

Просто добавьте line-height: 1px; к стилю элемента <div style="display: inline-block;">.

Это установит расстояние между каждой новой строкой в ​​1px.

Вот ваш код:

#onio_showmsg_div {
    width: 100%;
    height: 90%;
}
#onio_showmsg_div > #showmsg_div1 {
    width: 100%;
    float: left;
    border: 1px solid rgba(10, 10, 10, 0.1);
    border-right: none;
    border-left: none;
}
#msg_user {
    font-size: 12px;
}
#onio_user_2 {
    border-radius: 100%;
    height: 40px;
}

 <div id="onio_showmsg_div">
                <div id="showmsg_div1">
                    <img src="images/user.jpg" id="onio_user_2"  style="border: 2px solid lightblue">
                    <div style="display: inline-block; line-height: 1px;">
                        <p>BaTuTa</p>
                        <span style="margin: 0px;padding:0px;">Na</span>
                    </div>
                </div>                      
            </div>

А вот живое демо: https://codepen.io/marchmello/pen/QWjKgPE?editors=1100