如何使用CSS在容器中实现类似表的行

我正在帮助一位艺术家维护她的网站，并继承了一些相当过时的代码。我已经移动了大量冗余的通用代码来包含文件，现在我正在努力从内联样式转移到更多CSS驱动的样式

例如，对于图库页面，许多内嵌样式用于强制当前布局。我的偏好是将其完全替换为CSS，在“content”div中呈现以下类似表格的布局：

[图像][图像描述和购买按钮]
[图像][图像描述和购买按钮]
[图像][图像说明和购买按钮]

如果可能的话，我想将图像描述和购买按钮与图像对齐。然后在每行的上方和下方应用一些填充，以停止使用
标记作为垂直间距

有没有办法创建一个div来获得这种布局

---

谢谢

为了简单起见，使用内联样式，移动到CSS以实现您的目标

<div>
    <img src="#" style="float: left; padding: 10px 10px 10px 0;" />
    <div>
        <p>Text</p>
        <input type="submit" value="Submit" />
    </div>
</div>

正文

图像描述

<div id="container">
    <div id="row" style="display:table-row; margin:5px 0; outline:red solid 1px;">
        <div id="image" style="float:left; outline:blue solid 1px;"><img src="#" /></div>
        <div id="content" style="display:table-cell; padding:5px; outline:green solid 1px; vertical-align:middle;">
            Image Description<br />
            <input type="button" value="Button" />
        </div>
    </div>
</div>