コメントSemantic uiのコンポーネント配置

Question

私のプロジェクトでsemantic uiのコメントコンポーネントを使用しています。

<div class="ui left aligned segment"> 
    <h4 class="ui left floated green header">Messages</h4> 
    <div class="ui comments"> 
     <div class="comment"> 
      <a class="avatar"> 
       <img src="http://www.wallpapersxl.com/thumb/girl-profile-cute-baby-boy-is-kissing-to-small-and-it-s-a-marvelous-picture-62508.jpg"> 
      </a> 
      <div class="content"> 
       <a class="author">Matt</a> 
       <div class="metadata"> 
        <span class="date">Today at 5:42PM</span> 
       </div> 
       <div class="text"> 
        How artistic! 
       </div> 
       <div class="actions"> 
        <a class="reply">Reply</a> 
       </div> 
      </div> 
     </div> 
     <div class="comment"> 
      <a class="avatar"> 
       <img src="https://www.stihi.ru/photos/smalll.jpg"> 
      </a> 
      <div class="content"> 
       <a class="author">Elliot Fu</a> 
       <div class="metadata"> 
        <span class="date">Yesterday at 12:30AM</span> 
       </div> 
       <div class="text"> 
        <p>This has been very useful for my research. Thanks as well!</p> 
       </div> 
       <div class="actions"> 
        <a class="reply">Reply</a> 
       </div> 
      </div> 
      <div class="comments"> 
       <div class="comment"> 
        <a class="avatar"> 
         <img src="http://akvis.com/img/examples/magnifier/little-boy/original-image.jpg"> 
        </a> 
        <div class="content"> 
         <a class="author">Jenny Hess</a> 
         <div class="metadata"> 
          <span class="date">Just now</span> 
         </div> 
         <div class="text"> 
          Elliot you are always so right :) 
         </div> 
         <div class="actions"> 
          <a class="reply">Reply</a> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

ここでは、コメントコンポーネントが正しく整列されていません。意味論的な例のように、それらを整列させたままにしておきたい。最初のコメント要素がずれている

下の画像に見られるよう

http://semantic-ui.com/views/comment.html

は、しかし、私は、アライメントを取得します。いくつか助けてください。

Answer 1

これは、h4ヘッダーのfloatedクラスのために起こっています。

これを削除すれば、好きなようになります。

お会いしましょう。