图像和表格在一行

Question

我的图像为500px（宽度），表格为500px（宽度）（表格来自bootstrap）。

我想让图像和表格显示在一行中，但是表格会在图像下面显示。

Answer 1

jsFiddle demo

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

首先，在输出中呈现内联块元素之间的空格（空格，制表符，换行符）。将内联块元素视为单词。如果在单词之间放置空格，则会渲染空格。要抵消这一点，您可以在第二个元素上使用负边距，或者只删除HTML中两个元素之间的任何空格。

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

因为您正在使用Bootstrap，TABLE上的宽度也将设置为100％。您可以为TABLE设置明确的宽度，或者通过设置width: auto;

将元素恢复为默认值“根据需要增长”

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

Answer 2

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

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