Html CSS布局出乎意料_Html_Css

Html CSS布局出乎意料

html css

Html CSS布局出乎意料,html,css,Html,Css,我正在为我自己创建的软件设计一个网站。为此，我需要一个布局，其中三个框位于同一水平位置。但当我把文字放进这些文字中时，它们开始移动。可能的原因是什么 <body class="metro"> <nav class="navigation-bar"> <nav class="navigation-bar-content"> <div class="element">My Software Name&l

我正在为我自己创建的软件设计一个网站。为此，我需要一个布局，其中三个框位于同一水平位置。但当我把文字放进这些文字中时，它们开始移动。可能的原因是什么

<body class="metro">
    <nav class="navigation-bar">
        <nav class="navigation-bar-content">
            <div class="element">My Software Name</div>
            <span class="element-divider"></span>
            <a class="element place-right" href="#">Download</a>
        </nav>
    </nav>
    <div class="slideImage"></div>
    <div class="about">
        <div class="infoBar">
            <h2>What is ?</h2>
            <span class="paragraph">
                this is example text to illustrate the real problem  regardig the info bar alingment
            </span>
        </div>
        <div class="infoBar"><h2>Why this ?</h2>
            <span class="paragraph">

            </span>
        </div>
        <div class="infoBar"><h2>About</h2></div>
    </div>

</body>


我的软件名
是什么？
这是一个示例文本，用于说明有关信息栏对齐的实际问题
为什么会这样？
关于

您可以通过设置

垂直对齐：顶部

到

.infoBar

删除内联块元素之间的垂直空白

JSFiddle-

CSS:

.infoBar {
    vertical-align:top;
}

请把问题缩小范围。不要只包含整个css文件。