如何将跨度元素一个接一个地包装在图像旁边？

Question

我有一个导航栏，显示个人资料图片，个人资料名称和用户的电子邮件。 我想知道如何在图像旁边包裹文本和电子邮件。 就像小提琴的个人资料图片和名称一样。 就像链接中的那个

像这样

我尝试了这段代码。 我是CSS新手，不知道如何进行此操作。

<nav class="navbar navbar-default">
      <div class="container-fluid top-bar-admin">
          <div class="navbar-header">
              <a class="navbar-brand" href="#"><img src="{{url('/icons/logo.png')}}" id="cto_logo"></img></a>   
                </div>  
                <img id = "profile_pic" src = "https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg">  
                <span id="int_profile_name">Jeni</span>
                <span>jeni@gmail.com</span>
      </div>
  </nav> 

这是我的小提琴

Answer 1

尝试中断标签

<nav class="navbar navbar-default">
  <div class="container-fluid top-bar-admin">
      <div class="navbar-header">
          <a class="navbar-brand" href="#"><img src="{{url('/icons/logo.png')}}" id="cto_logo"></img></a>   
            </div>  
            <img id = "profile_pic" src = "https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg">  <br/>
            <span id="int_profile_name">Jeni</span><br/>
            <span>jeni@gmail.com</span>
  </div>

Answer 2

您可以使用此：

navbar-header.img, navbar-header.span{
   display: block;
}

Answer 3

请参阅使用flex更新：使用如下的span标签包裹您的跨度：

 <span class="wraptext"></span>

不管你上什么课。

用...包装图像

<div class="flexit">

不管你给哪个班级

只要使用正确的CSS作为目标即可。 见下文：

https://jsfiddle.net/inspiraller/gp21zmj7/1/

CSS

.flexit{
  display:flex;
}
#profile_pic{
    height: 40px;
    border-radius: 50px;
    margin-right:10px;
}
.email{
  display:block
}

HTML：

<nav class="navbar navbar-default">
            <div class="container-fluid top-bar-admin">
                <div class="navbar-header">
                   <a class="navbar-brand" href="#">LOGO</a>   
                </div>  
                <div class="flexit">


                   <img id = "profile_pic" src = "https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg">  
                   <span class="wraptext">
                      <span id="int_profile_name">Jeni</span>
                      <span class="email">jeni@gmail.com</span>
                   </span>
                </div>
            </div>
        </nav>

Answer 4

只需将您的文本和电子邮件添加到div中并display: inline-block ，它将使其出现在图像旁边。

要在文本后的新行中添加电子邮件，只需给其中一个样式display: block将使其占据整行。

有关您想做什么的更多信息，您可能需要阅读有关display属性的更多信息

jsfiddle为您想要的