Question

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

对于图库页面，例如http://artistsatlaketahoe.com/abstract.html，许多内联样式用于强制当前布局。我的偏好是完全用CSS替换它，在“content”div中呈现以下类似于表格的布局：

[图片] [图片描述和购买按钮]
[图片] [图片描述和购买按钮]
[image] [图片描述和购买按钮]

我想对图片描述中间对齐＆amp;如果可能，购买相对于图像的按钮。然后在每行的上方和下方应用一些填充以停止使用垂直间距的标签。

如何创建一个div，我可以使用它来获得这种布局？

谢谢！

Answer 1

为简单起见使用内联样式，请转到CSS以实现目标。

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

Answer 2

<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>

如何使用CSS在容器内实现像行一样的表

2 个答案: