语义ui中的注释组件对齐

Question

我在项目中使用语义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>

此处评论组件未正确对齐。我希望它们保持对齐，就像语义ui示例中那样。

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

但我得到了如下图所示的对齐

第一个评论元素未对齐。有人请帮忙。

Answer 1

由于h4标题中的floated类，这种情况正在发生。

删除它，它就像你想要的那样。

见。