css - 并排对齐 div 标签

Question

所以，这是一个愚蠢的问题，但我一辈子都无法让它发挥作用。

我有一个 div 标签，其中有一个 div 类，里面有一个设定的大小，并希望将它全部保持在一条水平线上。现在，第一张图片出现在内部 div 标签和第二张图片的上方。我试过添加 float: left; 这似乎使整个页面变得混乱。

CSS

#arrows {
    align: middle;
    width: auto;
    float: inherit;
    display: inline-block;
    height: 500px;
    overflow: hidden;
    white-space: nowrap;
}
.portfolio {
    align: middle;
    width: 750px;
    float: inherit;
    display: inline-block;
}

html

<div id="arrows">
    <p>
        <img src="../images/left.jpg" width="64" height="105" align="middle" />
        <div class="portfolio">
            <img src="../images/portfolio/borderpatrollogo.jpg" alt="U.S.   Border Patrol Brand Identity" width="564" height="475" align="middle" />
        </div>
        <img src="../images/right.jpg" alt="next" width="64" height="105" align="middle" />
    </p>
</div>