一行中的图像和表格[关闭]答案

【问题标题】：Image and table in one line [closed]一行中的图像和表格[关闭]
【发布时间】：2013-06-19 16:49:18
【问题描述】：

我有一个 500px（宽度）的图像和一个 500px（宽度）的表格（表格来自引导程序）。

我想让图像和表格显示在一行中，但表格位于图像下方。

【问题讨论】：

【解决方案1】：

jsFiddle demo

这是一个简单的示例，显示了 IMG 和 TABLE 内联。 display: inline-block; 用于将元素放在同一行，但您需要注意使用 inline-block 的两个副作用。

首先，行内块元素之间的空白（空格、制表符、换行符）在输出中呈现。将 inline-block 元素视为单词。如果在单词之间放置空格，它将呈现空格。为了抵消这一点，您可以在第二个元素上使用负边距，或者简单地删除 HTML 中两个元素之间的任何空白。

第二，内联块元素可以有一个垂直对齐属性集。如果您希望两个元素垂直对齐到彼此的中间，这很好。但是，如果您希望元素处于相同的高度，则必须在 CSS 中明确设置 vertical-align: top;。

因为您使用的是 Bootstrap，所以TABLE 上的宽度也将设置为 100%。您可以为TABLE 设置显式宽度，或通过设置width: auto; 将元素恢复为默认的“按需增长”

表格也会增长以适应其中的内容。 Bootstrap 通过在 CSS 中设置 max-width: 100%; 解决了这个问题。确保还定义了最大宽度，或者在设置宽度时在表格上使用table-layout: fixed;。

【讨论】：

【解决方案2】：

简单的答案（基于来自 OP 的有限信息）是使用 display: inline-block 作为表格和图像。

另一种方法是将图像放置在表格的额外列中（或作为列的背景）。

【讨论】：