Css 并排对齐div标记

所以，这是一个愚蠢的问题，但我一辈子都不能让它起作用

我有一个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>

在CSS中查找浮动规则，此处无法使用继承。请参见此处-align:middle无效