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>

这是我的fiddle

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，这样就可以占用整行。

有关您想要做的更多信息，您可能需要阅读有关显示属性的更多信息

jsfiddle了解你的想法

如何在图像旁边将span元素包含在另一个下面？

4 个答案: