如何將跨度元素在圖像旁邊放置在另一個下方？

我有一個導航欄，顯示個人資料圖片，個人資料名稱和用戶的電子郵件。我想知道如何將圖片旁邊的文字和電子郵件包裹起來。就像小提琴的個人資料照片和名字一樣。就像一個在鏈接如何將跨度元素在圖像旁邊放置在另一個下方？

我試過這個代碼。我是新來的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>[email protected]</span> 
     </div> 
    </nav>

這裏是我的fiddle

來源

2017-02-06 Naveen Kumar

嘗試突破標籤

<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>[email protected]</span> 
    </div>

來源

2017-02-06 17:06:31

突破將無法正常工作@seth什麼。 –

會將img的寬度和跨度設置爲100％適用於您的產品？ –

您可以使用此：

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

來源

2017-02-06 17:09:32

查看更新使用Flex：像這樣的跨度標籤包裝你跨度：

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

不要緊，你給它的類。

與

<div class="flexit">

包裝你的形象並不重要，你所付出的一流的IT。

只要你使用正確的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">[email protected]</span> 
        </span> 
       </div> 
      </div> 
     </nav>

來源

2017-02-06 17:15:33

只需添加文本和電子郵件到DIV，並給它display: inline-block這將使它出現在照片旁邊。

使文本後的新行中的電子郵件只是給他們其中一個風格display: block這將使其佔全線。

關於您所想要做的更多信息，你可能需要閱讀更多關於display屬性

jsfiddle您要

來源

2017-02-06 17:27:25

如何將跨度元素在圖像旁邊放置在另一個下方？

回答

相關問題