スパン要素をイメージの横に1つ下にラップするにはどうすればよいですか？

Question

私は、プロフィール画像、プロフィール名、およびユーザーのメールを表示するnavbarを持っています。画像の横にテキストとメールをラップする方法を知りたい。ちょうどフィドルのプロフィールの写真と名前のように。リンク

Like this

内の1つのと同じように、私はこのコードを試してみました。私は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

フレックス使用してアップデートを参照してください。をはこのよう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を与えます。

テキストの後ろに新しい行の電子メールを作成するには、それらのうちの1つにスタイル全体を取るようにするdisplay: blockスタイルを指定します。

は、あなたが何をしたいのかについての詳細は、あなたが